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

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

发展快照

生产快照

{ 
     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); 
    } 
});

来源

2017-05-30 RaviPatidar

我无法重现该问题。你能提供相同的小提琴吗？ –

尝试改变label.setAttributes到

label.setAttribute('text': text);

由于第三个参数avoidCopy有一个注意事项，可能会破坏对象的内容。

另外它可能是JS错误的结果，请尝试检查控制台日志。我建议使用typeof，而不是与undefined进行比较：

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

来源

2017-06-24 17:00:14 FieryCat

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

回答

相关问题