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

にを変更してください

第3パラメータavoidCopyには、オブジェクトの内容が破棄される可能性があるので注意してください。

また、JSエラーの結果である可能性があります。コンソールログを確認してみてください。私はtypeofを未定義のものと比較する代わりに使用することを提案します：

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