Обновить цвета легенд в диаграмме ExtJS 6

Question

У меня есть гистограмма с легендой в ExtJS 6.0.2.

Мне нужно обновить цвета баров и легенд, когда пользователь выполнит действие (щелкнув на кусочке пирога в моем случае).

Обновление цвета баров работает по назначению, но в легенде нет. Вот пример того, что я могу сделать прямо сейчас:

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

Цвета правильно установлены, но они обновляются только при нажатии на пункт легенды. Я предполагаю, что это связано с тем, что ExtJS не знает, что основной магазин был изменен. Я попытался подойти к столу с отладчиком, но я не нашел ничего полезного.

Есть ли лучший способ сделать то, что я хочу, и/или как сделать обновление легенды instanly?

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

Answer 1

Ok, вместо того, чтобы изменить цвета из серии и цвета легенды, вы можете изменить их все в одно и то же время, делая это

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

Итак, вам нужно установить c олоры на диаграмме, а не в серии, и модифицируйте массив при нажатии кнопки.