EXTJS5-如何动态添加饼图的图例颜色？

在EXTJS 5图表中使用自定义图例颜色时出现问题。我可以将自定义颜色应用于图表图例，但无法将其应用于图例项。我可以在系列中使用“colors”属性硬编码颜色，以静态方式处理此问题

series: {
    type: 'bar',
    colors: ['orange', 'yellow'],
    ...
} 

但是，我需要动态传递颜色。我需要从商店里取图例颜色，所以我不能硬编码

我的密码

Ext.define('GMIS.view.charts.pie.BasicPieLegend', {
    extend: 'Ext.Panel',

    config:{
        storeValue: null, //'BankerDataStoreChr'
        widthValue: null,
        heightValue: null, 
        identifier: null,
        titleValue : null,
        styleValue : null,
        styleValue1 : null,
        chartValue : null,
        selBanker : null
    },
    storeValue: null,
    constructor: function(cfg){
        this.initConfig(cfg);
        this.callParent();
        this.addCls(this.getStyleValue());
        this.addCls(this.getStyleValue1());

    },    
    xtype: 'basic-pie1',
    border: 0,

    initComponent: function() {
        var me = this;
        me.items = [{
            xtype: 'polar',//'chart',
            id: this.identifier,
            itemId: this.identifier,
            border:0,
            legend: {
                docked: 'top',

            },
            interactions: 'rotate',
            width:  this.widthValue,
            height: this.heightValue,
            animate: false,
            shadow: false,
            store: this.storeValue, 
            insertPadding: 0,
            series: [{

                type: 'pie',
                label: {
                    field: 'name',
                    display: 'rotate',
                },
                xField: 'data1',//angleField:
                donut: 30,
                //colors: ['orange', 'yellow'],
                /*colors : ['#55aaff',
                          '#ffbb00',
                          '#DA4545',
                          '#8866ff',
                          '#ff6600',
                          '#B8005C',
                          '#947171'],*/

                renderer: function (sprite, config, rendererData, index/*sprite, record, attr, index*/) {
                    var record = rendererData.store.getData().items[index];
                    console.log(record.data.color);
                    return Ext.apply(rendererData, {
                        fillStyle: record.data.color
                    });

                },


                showInLegend: true

            }]
        }];

        this.callParent();

    },


});

如果我需要改变什么，请告诉我

---

提前感谢

我为您创建了小提琴：

---

只需使用方法并使用

doLayout（）

方法更新布局。您的图表颜色（也包括图例颜色）将被更新。

我为您创建了fiddle:

---

只需使用方法并使用

doLayout（）

方法更新布局。您的图表颜色（也包括图例颜色）将被更新。

您可以使用图例tpl进行此实现

legend: {
    docked: 'bottom',
    tpl:  ['<div class="', Ext.baseCSSPrefix, 'legend-container">', '<tpl for=".">', '<div class="', Ext.baseCSSPrefix, 'legend-item">', '<span ', 'class="', Ext.baseCSSPrefix, 'legend-item-marker {[ values.disabled ? Ext.baseCSSPrefix + \'legend-inactive\' : \'\' ]}" ', 'style="background:{[this.getLegendColor(values)]};">', '</span>{name}', '</div>', '</tpl>', '</div>',
    {
       getLegendColor: function(recordValues) {
            var color = null;
            // Set color using data from corresponding record
            return color;
       }
    }]
}

图例：{
停靠：“底部”，
第三方物流：[''，''，''，''，'{name}'，''，''，''，
{
getLegendColor:函数（记录值）{
var color=null；
//使用相应记录中的数据设置颜色
返回颜色；
}
}]
}

您可以将legend tpl用于此实现

legend: {
    docked: 'bottom',
    tpl:  ['<div class="', Ext.baseCSSPrefix, 'legend-container">', '<tpl for=".">', '<div class="', Ext.baseCSSPrefix, 'legend-item">', '<span ', 'class="', Ext.baseCSSPrefix, 'legend-item-marker {[ values.disabled ? Ext.baseCSSPrefix + \'legend-inactive\' : \'\' ]}" ', 'style="background:{[this.getLegendColor(values)]};">', '</span>{name}', '</div>', '</tpl>', '</div>',
    {
       getLegendColor: function(recordValues) {
            var color = null;
            // Set color using data from corresponding record
            return color;
       }
    }]
}

图例：{
停靠：“底部”，
第三方物流：[''，''，''，''，'{name}'，''，''，''，
{
getLegendColor:函数（记录值）{
var color=null；
//使用相应记录中的数据设置颜色
返回颜色；
}
}]
}