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

私はsenchaフォーラムを検索しましたが、特に私の要件を満たすものは見つかりませんでした。 今のところ私は、カスタムレンダラーで折れ線グラフ上の点の色を変更することができました。

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

しかし、私はラインの下の色を変更する方法が見つかりませんでした。 これに関する提案はありますか？

UPDATE - 今

を微細加工私はコロンボによって与えられた回答に基づいてソリューションを実装します。

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

これは本当によさそうだと私はあなたが新しいスプライトはチャートからクリアあるコンテナのサイズを変更する場合にはとを期待していた効果があります。再びコロンボに行きます。

Answer 1

これは実装することができます。ここで私はそれをやる方法です。

1. afterrenderイベントのリスナーをseriesに追加します。

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に追加することで可能です。

Ext.draw.Surface.addメソッドを使用してチャートがすべてレンダリングされた後でも、ドキュメント内にhereというように表示できます。

幅と位置を決定するロジックを考え出す必要があります。チャートAPIを正しく覚えている場合は、itemsのプロパティを使って個々のレコードのx座標（水平位置）を抽出できます。 Ext.chart.series.Lineオブジェクトがグラフ内にあります。

ハイライトの高さは、チャートの高さを読むだけで簡単です。