Question

在EXTJS 5图表中使用自定义图例颜色时出现问题。我可以将自定义颜色应用于图表图例，但我无法将其应用于图例项目。我可以使用系列中的“colors”属性对颜色进行硬编码，以静态处理这个问题。比如

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

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

我的代码。

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();

    },


});

如果我需要更改某些内容，请告诉我。

提前致谢

Answer 1

我为你创造了小提琴：Dynamic colors fiddle。

只需使用setColors()方法并使用doLayout()方法更新布局。您的图表颜色（也包含图例颜色）将会更新。

Answer 2

您可以使用图例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;
       }
    }]
}

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

2 个答案: