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

Question

I am using extjs 4.2 pie chart and having multiple records in my store. i want to show legend color same as of the each slice color. currently each legend color is same in my production version but in my development version this is working correct. here is my code.

development snapshot

production snapshot

{
        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

Try to change label.setAttributes to

label.setAttribute('text': text);

Because third parameter avoidCopy has a note that the content of object may be destroyed.

Also it can be a result of JS error, try to check console logs. I would suggest to use typeof instead of comparing with undefined:

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