Làm nổi bật một phần của biểu đồ đường nhánh extjs4

Question

Trong mã extjs 4.1.1a bên dưới là ví dụ hoạt động của biểu đồ dạng đường. Bây giờ tôi cần làm nổi bật một phần của biểu đồ đó trên một dấu thời gian tối thiểu và tối đa đã cho.

{'xtype' : 'chart', 
'store' : 'ChartData', 
'height' : '100%', 
'width' : '100%', 
'legend' : {'position' : top}, 
'axes': [{ 
    'title': 'Power', 
    'type': 'Numeric', 
    'position': 'left', 
    'fields': ['power'] 
},{ 
    'title': 'Timestamp', 
    'type': 'Numeric', 
    'position': 'bottom', 
    'fields': ['timestamp'], 
    'minorTickSteps': 3 
}], 
'series': [{ 
    'type': 'line', 
    'fill': true, 
    'axis' : 'left', 
    'xField': 'timestamp', 
    'yField': 'power' 
}]} 

Tôi đã tìm kiếm diễn đàn sencha và không tìm thấy gì cụ thể đáp ứng các yêu cầu của tôi. Hiện tại, tôi đã quản lý để thay đổi màu của các điểm trên biểu đồ dạng đường bằng trình kết xuất tùy chỉnh.

'renderer': function(sprite, record, attr, index, store) { 
var item = store.getAt(index); 
if(item != undefined && (item.get('timestamp') < startdate || item.get('timestamp') > enddate)){ 
    return Ext.apply(attr, {'fill': '#00cc00', 'stroke-width': 3, 'radius': 4}); 
}else{ 
    return Ext.apply(attr, {'fill': '#ff0000', 'stroke-width': 3, 'radius': 4}); 
}} 

Nhưng tôi không tìm thấy cách thay đổi màu bên dưới dòng. Bất kỳ đề xuất nào về điều đó?

CẬP NHẬT - tốt Làm việc tại

tôi thực hiện một giải pháp dựa trên câu trả lời được đưa ra bởi Colombo.

doCustomDrawing: function() {: function (p){ 
var me = this, chart = me.chart; 
if(chart.rendered){ 
    var series = chart.series.items[0]; 
    if (me.groupChain != null) { 
     me.groupChain.destroy(); 
     me.groupChain = null; 
    } 
    me.groupChain = Ext.create('Ext.draw.CompositeSprite', { 
     surface: chart.surface 
    }); 
    if(series != null && series.items != null){ 
     var surface = chart.surface; 
     var pathV = 'M'; 
     var first = true; 
     // need first and last x cooridnate 
     var mX = 0,hX = 0; 
     Ext.each(series.items, function(item){ 
      var storeItem = item.storeItem, 
        pointX = item.point[0], 
        pointY = item.point[1]; 
      // based on given startdate and enddate start collection path coordinates 
      if(!(storeItem.get('timestamp') < startdate || storeItem.get('timestamp') > enddate)){ 
       if(hX<pointX){ 
        hX = pointX; 
       } 
       if(first){ 
        first = false; 
        mX = pointX; 
        pathV+= + pointX + ' ' + pointY; 
       }else{ 
        pathV+= ' L' + pointX + ' ' + pointY; 
       } 
      } 
     }); 
     var sprite = Ext.create('Ext.draw.Sprite', { 
      type: 'path', 
      fill: '#f00', 
      surface: surface, 
      // to draw a sprite with the area below the line we need the y coordinate of the x axe which is in my case items[1] 
      path : pathV + ' L'+ hX + ' ' + chart.axes.items[1].y + ' L'+ mX + ' ' + chart.axes.items[1].y + 'z' 
     }); 
     me.groupChain.add(sprite); 
     me.groupChain.show(true); 
    } 
}} 

này trông thật sự tốt và có tác dụng tôi đã hy vọng cho và trong trường hợp bạn thay đổi kích thước container sprite mới là xóa khỏi bảng xếp hạng. Thx đến Colombo lần nữa.

Answer 1

Điều này có thể thực hiện. Đây là cách tôi sẽ làm điều đó.

1. Thêm người nghe cho sự kiện afterrender cho series.

listeners: { 
       afterrender: function (p) { 
        this.doCustomDrawing(); 
       }, 
       scope: me 
} 

2. Tạo một CompositeSprite

doCustomDrawing: function() { 
    var me = this, chart = me.chart; 

    if (chart.rendered) { 
     var series = chart.series.items[0]; 
     if (me.groupChain != null) { 
      me.groupChain.destroy(); 
      me.groupChain = null; 
     } 

     me.groupChain = Ext.create('Ext.draw.CompositeSprite', { 
      surface: chart.surface 
     }); 

     // Draw hilight here 
     Ext.each(series.items, function (item) { 
      var storeItem = item.storeItem, 
       pointX = item.point[0], 
       pointY = item.point[1]; 

      //TODO: Create your new line sprite using pointX and pointY 
      // and add it to CompositeSprite me.groupChain 


     }); 

     me.groupChain.show(true); 
    } 
}, 

Answer 2

Không có cách nào "tích hợp" để thực hiện việc này. Có thể bạn đang gặp phải một số khó khăn khi tìm kiếm nó bởi vì "làm nổi bật" biểu đồ đường hiện có nghĩa là một cái gì đó hoàn toàn khác trong API ExtJS. Nó thường đề cập đến việc làm cho các dòng và đánh dấu đậm khi bạn di chuột qua một chuỗi dữ liệu.

Tuy nhiên ý tưởng của bạn nghe có vẻ thú vị, tôi có thể cần sử dụng điều này trong một dự án mà tôi sắp đưa ra.

Tôi không có thời gian để tìm ra mã chính xác ngay bây giờ nhưng điều này có thể được thực hiện bằng cách tạo một hình chữ nhật sprite và thêm nó vào biểu đồ surface property.

Bạn có thể làm điều đó ngay cả sau khi biểu đồ đã được hiển thị bằng phương pháp Ext.draw.Surface.add như được mô tả here trong tài liệu.

Bạn sẽ phải đưa ra logic để xác định chiều rộng và vị trí, nếu tôi nhớ API biểu đồ đúng cách, bạn sẽ có thể trích xuất tọa độ x (vị trí nằm ngang) của các bản ghi riêng lẻ bằng cách câu cá trong thuộc tính items của Ext.chart.series.Line đối tượng bên trong biểu đồ.

Chiều cao của đánh dấu phải dễ dàng - chỉ cần đọc chiều cao của biểu đồ.