Farben der Legende in ExtJS 6 Diagramm aktualisieren

Question

Ich habe ein Balkendiagramm mit einer Legende in ExtJS 6.0.2.

Ich muss die Farben der Balken und der Legende aktualisieren, wenn der Benutzer eine Aktion ausführt (in meinem Fall auf einen Kreisausschnitt klickend).

Aktualisieren der Farbe der Balken funktioniert wie vorgesehen, aber die Legende nicht. Hier ist ein Beispiel dafür, was ich jetzt tun:

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

Die Farben richtig eingestellt sind, aber sie nur aktualisieren, wenn ich auf der Legende Element klicken. Ich nehme an, dass ExtJS nicht wissen kann, dass der zugrunde liegende Speicher geändert wurde. Ich habe versucht, den Callstack mit dem Debugger aufzustocken, aber ich habe nichts Nützliches gefunden.

Gibt es einen besseren Weg, um zu tun, was ich will, und/oder wie man die Legende sofort aktualisieren kann?

EDIT: Wenn es hilft, ist hier, wie ich die Bars aktualisieren:

serie.setConfig("colors", newColors); 

EDIT2: Und hier ist die vollständige Grafik-Code:

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, statt Farben der ändern Serie und Farben der Legende, können Sie alle von ihnen in der gleichen Zeit tun dies zu tun

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

Sie müssen also c setzen olors auf Diagramm und nicht auf Reihe, und ändern das Array auf Knopfdruck.