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 - 如何动态添加饼图的图例颜色？

回答

相关问题