EXTJS5 - 如何動態添加餅圖的圖例顏色？

在EXTJS 5圖表中使用自定義圖例顏色時遇到問題。我可以將自定義顏色應用於圖表圖例，但我無法將其應用於圖例項目。我可以硬編碼採用系列中「色」屬性的顏色，以靜態處理這個問題。就像EXTJS5 - 如何動態添加餅圖的圖例顏色？

series: { 
    type: 'bar', 
    colors: ['orange', 'yellow'], 
    ... 
}

但是，我需要動態傳遞的顏色。我需要從商店獲取圖例顏色。所以我不能硬編碼它

我的代碼。

Ext.define('GMIS.view.charts.pie.BasicPieLegend', { 
    extend: 'Ext.Panel', 

    config:{ 
     storeValue: null, //'BankerDataStoreChr' 
     widthValue: null, 
     heightValue: null, 
     identifier: null, 
     titleValue : null, 
     styleValue : null, 
     styleValue1 : null, 
     chartValue : null, 
     selBanker : null 
    }, 
    storeValue: null, 
    constructor: function(cfg){ 
     this.initConfig(cfg); 
     this.callParent(); 
     this.addCls(this.getStyleValue()); 
     this.addCls(this.getStyleValue1()); 

    },  
    xtype: 'basic-pie1', 
    border: 0, 

    initComponent: function() { 
     var me = this; 
     me.items = [{ 
      xtype: 'polar',//'chart', 
      id: this.identifier, 
      itemId: this.identifier, 
      border:0, 
      legend: { 
       docked: 'top', 

      }, 
      interactions: 'rotate', 
      width: this.widthValue, 
      height: this.heightValue, 
      animate: false, 
      shadow: false, 
      store: this.storeValue, 
      insertPadding: 0, 
      series: [{ 

       type: 'pie', 
       label: { 
        field: 'name', 
        display: 'rotate', 
       }, 
       xField: 'data1',//angleField: 
       donut: 30, 
       //colors: ['orange', 'yellow'], 
       /*colors : ['#55aaff', 
          '#ffbb00', 
          '#DA4545', 
          '#8866ff', 
          '#ff6600', 
          '#B8005C', 
          '#947171'],*/ 

       renderer: function (sprite, config, rendererData, index/*sprite, record, attr, index*/) { 
        var record = rendererData.store.getData().items[index]; 
        console.log(record.data.color); 
        return Ext.apply(rendererData, { 
         fillStyle: record.data.color 
        }); 

       }, 


       showInLegend: true 

      }] 
     }]; 

     this.callParent(); 

    }, 


});

請讓我知道如果我需要改變一些東西。

在此先感謝

來源

2016-01-28 user1157940

我創建搗鼓你：Dynamic colors fiddle。

只需使用setColors()方法並使用doLayout()方法更新佈局。你的圖表顏色（也有圖例顏色）將被更新。

來源

2016-01-28 11:00:48

您可以使用圖例tpl來實現此實現。

legend: { 
    docked: 'bottom', 
    tpl: ['<div class="', Ext.baseCSSPrefix, 'legend-container">', '<tpl for=".">', '<div class="', Ext.baseCSSPrefix, 'legend-item">', '<span ', 'class="', Ext.baseCSSPrefix, 'legend-item-marker {[ values.disabled ? Ext.baseCSSPrefix + \'legend-inactive\' : \'\' ]}" ', 'style="background:{[this.getLegendColor(values)]};">', '</span>{name}', '</div>', '</tpl>', '</div>', 
    { 
     getLegendColor: function(recordValues) { 
      var color = null; 
      // Set color using data from corresponding record 
      return color; 
     } 
    }] 
}

來源

2016-01-28 11:04:50 Gilsha

EXTJS5 - 如何動態添加餅圖的圖例顏色？

回答

相關問題