javascript - extjs饼图所有图例显示相同颜色

Question

我正在使用 extjs 4.2 饼图并且在我的商店中有多个记录。 我想显示与每个切片颜色相同的图例颜色。目前每个图例颜色在我的生产版本中都是相同的，但在我的开发版本中这是正确的。这是我的代码。

开发快照

生产快照

{
        xtype: 'piechartattendancereport',
        itemId: 'studentattandencesummeryvise',
        title: 'Attendance Summary',
        width : 450,
        minHeight : 240,
        store: 'mystore.store.attendance.PendingAttendanceGridStore',
        countField: 'totalDays',
        valueField: 'programName'
    }




Ext.define('myapp.view.PieChartAttendanceReport', {
    extend: 'Ext.chart.Chart',
    alias: 'widget.piechartattendancereport',
    animate: true,
    shadow: true,
    legend: {
        position: 'right'
    },
    insetPadding: 30,
    theme: 'Base:gradients',
    initComponent: function() {
        var this$ = this;
        var countField = !isNullOrEmpty(this.countField)?this.countField:'number';
        var valueField = !isNullOrEmpty(this.valueField)?this.valueField:'category';
        var showLegend = (!isNullOrEmpty(this.legendField)&& this.legendField)?true:false;
        var chartStore = null;
        if(!isNullOrEmpty(this.store)){
            chartStore = Ext.create(this.store);
        }else{
            chartStore = Ext.create('Ext.data.JsonStore',{
                fields: ['number', 'category'],
                data: [{
                    number :0,
                    category : 'Category'
                }]
            });
        }
        Ext.apply(this$, {
            store: chartStore,
            series: [{
                type: 'pie',
                field: countField,
                showInLegend: true,
                donut: false,
                tips: {
                    trackMouse: true,
                    //width: 300,
                    height: 28,
                    layout: 'fit',
                    renderer: function(storeItem, item) {
                        var total = 0;
                        chartStore.each(function(rec) {
                            total += rec.get(countField);
                        });
                        var tipTitle = storeItem.get(valueField) + ': ' + storeItem.get(countField);
                        var length = (tipTitle.length)* 10;
                        this.setWidth(length);
                        this.setTitle(tipTitle);
                    }
                },
                highlight: {
                    segment: {
                        margin: 20
                    }
                },
                label: {
                    field: valueField,
                    display: 'rotate',
                    contrast: true,
                    font: '15px Arial',
                    renderer: function(value, label, storeItem, item, i, display, animate, index) {
                        var text;
                        if(storeItem.get(countField)!= undefined ||  storeItem.get(countField)!= null){
                            if(storeItem.get(countField) == 0){
                                text = '';
                            }else{
                                text = storeItem.get("Present")+ '%' ;
                                if(text.length > 12){
                                    text = text.substring(0, 10) + '..';
                                }
                            }

                        }else{
                            text = value;
                        }
                        label.setAttributes({
                            text: text
                        }, true);
                        return text;
                    }
                }
            }]
        });

        this$.callParent(arguments);
    }
});

Answer 1

尝试将label.setAttributes改为

label.setAttribute('text': text);

因为第三个参数avoidCopy有提示，object的内容可能会被破坏。

也可能是JS错误导致的，尝试查看控制台日志。我建议使用 typeof 而不是与 undefined 进行比较:

if (typeof storeItem.get(countField) !== 'undefined' ||  storeItem.get(countField) != null) {