ExtJS 4.2 图例颜色与饼图切片不匹配

Question

我正在尝试在 ExtJS 4.2.2.1144（我无法控制的第三方产品）中创建一个饼图。我需要为我的饼图切片设置自定义颜色，它可以根据需要工作。然而，传说并不相符。如何修复它，以便图例使用与饼图切片相同的自定义颜色？

_createPieChart: function (records) {
    var pieChart;
    if (this.pieChart) {
        this.remove(this.pieChart);
        this.titleByPlanEstimate.destroy();
        this.pieChart.destroy();
    }
    // Prepare data for pie chart based on radio button selection
    var radio1 = Ext.getCmp('radio1');
    var pieChartData = radio1.getValue() ? this._prepareDataByThemeCount(records) : this._prepareDataByPlanEstimate(records);

    var totalCount = 0;
    pieChartData.forEach(function (item) {
        totalCount += item.count;
    });

    const colors = pieChartData.map(item => item.color);

    pieChart = Ext.create('Ext.chart.Chart', {
        xtype: 'chart',
        width: 500,
        height: 350,
        animate: true,
        //colorSet: colors,
        store: {
            fields: ['theme', 'count'],
            data: pieChartData // Use the prepared pie chart data
        },
        series: [{
            type: 'pie',
            angleField: 'count',
            animate: true,
            showInLegend: true,
            renderer: function(sprite, record, attr, index, store) {
                const recordTheme = record.data.theme;
                const sectionColor = pieChartData.find(item => item.theme === recordTheme).color;
                attr.fill = sectionColor ?? 'red';
                return attr;
            },
            label: {
                field: 'theme',
                display: 'rotate',
                renderer: function (storeItem, item) {
                    var theme = storeItem;
                    var count = pieChartData.find(function (record) {
                        return record.theme === theme;
                    }).count;
                    return (count / totalCount * 100).toFixed(2) + "%";
                }
            },
            highlight: {
                segment: {
                    margin: 20
                }
            },
            listeners: {
                itemmousedown: function (series, item, event) {
                    console.log('Clicked on', item.record.get('theme'));
                }
            }
        }],
        legend: {
            position: 'right',
            labelFont: '12px Arial',
            itemSpacing: 8,
        },
        insetPadding: 30
    });

正如目前存在的那样，饼图本身从系列渲染器接收其颜色。

colorSet

似乎没有做任何事情，所以它被注释掉了。

Answer 1

Ext.chart.series.Series

有一个

getLegendColor

功能，您可以使用它来自定义图例中的颜色。图例中的每个项目都会调用此方法，因此只有当您可以根据图例中的索引设置颜色时，它才会对您有所帮助：

series: [{
    type: 'pie',
    getLegendColor: function(index) {
        // add your logic here to determine the colors based on the index
        return '#FF0000';
    },
    ...
}]