Question

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

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

更新条形图的颜色按预期工作，但图例不会。以下是我现在所做的一个例子：

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

颜色已正确设置，但只有在我点击图例项目时才会更新。我想这是因为ExtJS无法知道底层商店已被修改。我尝试使用调试器调试callstack，但我找不到任何有用的东西。

有没有更好的方法来做我想要的，或/和如何实时更新图例？

编辑：如果有帮助，这是我更新栏的方式：

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图表中的图例颜色

1 个答案: