2016-10-26 5 views
0

私はExtJS 6.0.2の凡例を持つ棒グラフを持っています。ExtJS 6のチャートの凡例の色を更新します

ユーザがアクションを実行したとき(私の場合はパイスライスをクリック)、バーと凡例の色を更新する必要があります。

バーの色を更新することは意図した通りに動作しますが、凡例は動作しません。ここで私は今何をすべきかの例です:

chart.getLegendStore().data.items.forEach(function(x){ 
    x.data.mark = 'rgb(255,255,255)'; 
}); 

色が正しく設定されますが、私は伝説のアイテムをクリックしたとき、彼らは唯一の更新されています。 ExtJSは、基礎となるストアが変更されたことを知る方法がないためだと思います。私はデバッガでコールスタックを上げようとしましたが、役に立たないものは何も見つかりませんでした。

欲しいものをやり遂げるためのよりよい方法があるのですか?凡例を瞬時に更新する方法はありますか?

EDIT:それは役立ちます場合は、ここで私はバーを更新する方法である:

serie.setConfig("colors", newColors); 

EDIT2:

Ext.define('QuoteBarChart', { 
extend: 'Ext.chart.CartesianChart', 

alias: 'widget.quotebarchart', 
xtype: 'quotebarchart', 

requires: [ 
    'Ext.chart.axis.Category', 
    'Ext.chart.axis.Numeric', 
    'Ext.chart.series.Bar', 
    'Ext.chart.series.Line', 
    'Ext.chart.theme.Muted', 
    'Ext.chart.interactions.ItemHighlight' 
], 

flex: 2, 
height: 600, 
theme: 'Muted', 
itemId: 'chartId', 

store: { 
    type: 'quote' 
}, 

insetPadding: { 
    top: 40, 
    bottom: 40, 
    left: 20, 
    right: 40 
}, 

axes: [{ 
    type: 'numeric', 
    position: 'left', 
    fields: ['won', 'lost', 'open'], 
    minimum: 0, 
    grid: true, 
    titleMargin: 20, 
    title: 'Offres' 
}, { 
    type: 'category', 
    position: 'bottom', 
    label: { 
     rotate: { 
      degrees: 45 
     } 
    }, 
    fields: ['month'] 
} 
], 

series: [{ 
    type: 'bar', 
    axis: 'left', 
    xField: 'month', 
    itemId: 'barId', 
    yField: ['open','lost','won'], 
    title: ['Ouvertes', 'Perdues','Gagnées'], 
    stacked: true, 
    fullStack: true, 

    colors: [ 
     'rgb(64, 145, 186)', 'rgb(151, 65, 68)','rgb(140, 166, 64)' 
    ], 
    highlight: { 
     strokeStyle: 'red', 
     fillStyle: 'black' 
    }, 
    tooltip: { 
     trackMouse: true, 
     scope: this, 
     renderer: function (toolTip, storeItem, item) { 
      var name = ""; 
      switch(item.field) { 
       case 'won': name = "Gagnées"; break; 
       case 'lost': name = "Perdues"; break; 
       case 'open': name = "Ouvertes"; break; 
      } 
      toolTip.setHtml(""); 
     } 
    } 
}], 
legend: { 
    docked: 'bottom', 
    listeners: { 
     itemclick: 'onLegendItemClick', 
     itemmouseenter: 'onLegendItemHover' 
    } 
} 
)}; 
+0

あなたはMr.George @ –

+0

を変更should'tが、私は、私は理解 –

+0

をクリックし、すべての上に印刷した伝説 – rbntd

答えて

1

[OK]を、代わりの色を変更します。ここには、完全なチャートコードですシリーズと色の凡例、あなたはこれを行うと同時にそれらのすべてを変更することができます

   chart.setColors(['red','blue','green']); 
       chart.redraw(); 

あなたはcを設定する必要がありますグラフ上ではなくシリーズではなく、ボタンクリック時に配列を変更します。

+1

ありがとうございました!出来た !しかし、それは 'setColors(['rgb(red、green、blue)'、...])' :)です。 – rbntd

関連する問題