Mise à jour des couleurs de légende dans le graphique ExtJS 6

Question

J'ai un histogramme avec une légende dans ExtJS 6.0.2.

J'ai besoin de mettre à jour les couleurs des barres et de la légende lorsque l'utilisateur fait une action (en cliquant sur une tranche de tarte dans mon cas).

La mise à jour de la couleur des barres fonctionne comme prévu, mais pas la légende. Voici un exemple de ce que je fais en ce moment:

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

Les couleurs sont correctement définies, mais ils mettent à jour que lorsque je clique sur l'élément de légende. Je suppose que c'est parce que ExtJS n'a aucun moyen de savoir que le magasin sous-jacent a été modifié. J'ai essayé d'aller dans le callstack avec le débogueur mais je n'ai rien trouvé d'utile.

Existe-t-il une meilleure façon de faire ce que je veux, et/et comment mettre à jour la légende instanly?

EDIT: Si cela peut aider, voici comment mettre à jour les barres:

serie.setConfig("colors", newColors); 

EDIT2: Et voici le code complet de tableau:

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, au lieu de modifier les couleurs de la séries et couleurs de la légende, vous pouvez les modifier tous en même temps

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

Vous devez donc définir c olors sur le graphique et non sur la série, et modifiez le tableau sur le bouton cliquez.