更新ExtJS 6圖表中的圖例顏色

我在ExtJS 6.0.2中有一個帶有圖例的條形圖。更新ExtJS 6圖表中的圖例顏色

我需要更新酒吧和圖例的顏色，當用戶做一個動作（在我的情況下點擊一個餅圖片）。

更新條的顏色按預期工作，但圖例不符合要求。這裏是什麼，我現在做的一個例子：

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

顏色設置正確，但是當我點擊圖例項目他們只更新。我想這是因爲ExtJS無法知道底層商店已被修改。我試着用調試器去調用堆棧，但是我沒有找到任何有用的東西。

有沒有更好的方法來做我想做的事情，或者/以及如何讓圖例更新立即實現？

編輯：如果有幫助，這是我如何更新吧：

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

來源

2016-10-26 rbntd

你should't修改集團的印刷版上的每個傳說 –

點擊 –

@ Mr.George但隨後欄的顏色和傳說不匹配，直到我點擊 – rbntd

好，而不是修改的顏色系列和顏色的圖例，你可以在同一時間修改所有這些

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

所以你需要設置c olor在圖表上而不是在系列上，並在按鈕單擊時修改數組。

來源

2016-10-26 15:35:54

非常感謝！有效！但它是'setColors（['rgb（red，green，blue）'，...]）':) – rbntd

更新ExtJS 6圖表中的圖例顏色

回答

相關問題