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餅圖所有圖例顯示相同的顏色

回答

相關問題