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

Question

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

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

更新条形颜色可以按预期进行，但图例却不能。这是我现在所做的一个示例:

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

Answer 1

好的，您可以同时修改所有颜色，而不是修改系列的颜色和图例的颜色

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

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