更新 ExtJS 6 图表中的图例颜色

Question

我在 ExtJS 6.0.2 中有一个带有图例的条形图。

我需要在用户执行操作时更新条形图和图例的颜色（在我的例子中单击饼图切片）。

更新条形的颜色按预期工作，但图例没有。这是我现在所做的一个例子：

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

颜色设置正确，但只有在我点击图例项目时它们才会更新。我猜这是因为 ExtJS 无法知道底层存储已被修改。我尝试使用调试器提升调用堆栈，但没有发现任何有用的东西。

有没有更好的方法来做我想做的事，or/and如何让图例即时更新？

编辑：如果有帮助，这是我更新条形图的方法：

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

好的，除了修改系列的颜色和图例的颜色外，您还可以同时修改所有颜色

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

因此您需要在图表而不是系列上设置颜色，并在单击按钮时修改数组。

更新 ExtJS 6 图表中的图例颜色

Update legend colors in ExtJS 6 chart

javascript

extjs

extjs-chart

extjs6

extjs6-classic