突出顯示extjs4折線圖的一部分

Question

在extjs 4.1.1a代碼中，下面是一個折線圖的工作示例。現在我需要在給定的最小和最大時間戳上突出顯示該圖表的一部分。

{'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' 
}]} 

我搜索的煎茶論壇，發現沒什麼特別的，符合我的要求。 現在我設法使用自定義渲染器更改折線圖上點的顏色。

'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}); 
}} 

但我還沒有找到方法來改變線下方的顏色。 對此有何建議？

更新 - 做工精細現在

我實現了一個基於科倫坡給出的答案的解決方案。

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); 
    } 
}} 

這看起來非常好，有我在的情況下希望和影響您調整容器中的新精靈是從圖表中清除。 Thx再次來到科倫坡。

Answer 1

這是可以實現的。這是我會怎麼做的。

1.爲series添加afterrender事件的偵聽器。

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

2.創建一個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

對此沒有「內置」方式。您可能會遇到一些困難，因爲「突出顯示」折線圖意味着ExtJS API中完全不同。它通常指將鼠標懸停在數據序列上時使行和標記爲粗體。

然而，你的想法聽起來很有趣，我可能需要在一個我已經提出的項目中使用它。

我現在沒有時間計算出確切的代碼，但可以通過創建一個矩形sprite並將其添加到圖表的surface property來完成。

即使在使用文檔中描述的here的Ext.draw.Surface.add方法將圖表全部渲染後，也可以這樣做。

如果我正確記住圖表API，您將不得不提出用於確定寬度和位置的邏輯，您應該能夠通過在items屬性中捕獲各個記錄的x座標（水平位置） Ext.chart.series.Line圖表內的對象。

突出顯示的高度應該很容易 - 只需讀取圖表的高度即可。