Extjs改变堆叠条形图中条形的颜色

我们拿this example ...如何改变这些条形的颜色？Extjs改变堆叠条形图中条形的颜色

我知道我可以通过渲染器改变它，但它不会改变图例。

我曾尝试使用：

style: {fill: 'red'}

但永远禁止

我试图把颜色阵列，它不工作就改变颜色。

我试图把每一种风格的阵列，像这样：

style: [{fill: 'red'}, {fill: 'green'}, {fill: 'blue'}]

但它不会工作，因为我可以把职称的阵列，如：

title: ['title1', 'title2', 'title3']

我想它（样式）应该工作，但不是。

那么如何更改每个“数据”栏的颜色？

来源

2011-06-15 Nazin

条的颜色实际上是由chart's theme确定：

Ext.create('Ext.chart.Chart', { 
    theme: 'myTheme' 
    //the remainder of your code... 
});

为了使用自定义颜色，则需要扩展现有的“基地”的主题，如custom area chart example。

来源

2011-06-15 20:39:55 NT3RP

非常感谢！它工作正常 – Nazin 2011-06-16 10:58:35

Ext.onReady(function() 
{ 

    Ext.create('Ext.window.Window', 
    { 
    title: 'Pie1 Chart', 
    height: 400, 
    layout: 'fit', 
    width: 400, 
    items: 
    [{ 
     xtype: 'chart', 
     animate:false , 
     insetPadding:0, 

     legend: 
    { 
     position: 'right' 
     }, 
     shadow: true, 
     store: 
    { 
     fields: 
    [{ 
      name: 'category', type: 'string' 
     }, 

    { 
      name: 'data', type: 'float' 
     }], 
     data: 
    [{ 
      category: 'Alive', data: 1.5 
     },{ 
      category: 'Dead', data: 2 
     },{ 
      category: 'Standby', data: 1 
     }] 
     }, 
     series: [{ 
     type: 'pie', 
     field: 'data', 
    colorSet: ['#0000FF','#FFffff','#00FF00'], 

     showInLegend: true, <!--It is use to display data in which color.--> 
     highlight: { 
      segment: { 
      margin: 20 
      } 
     }, 
     label: { 
      field: 'category', 
      display: 'rotate', 
      contrast: true, 
      font: '18px Arial' 
     } 
     }] 
    }] 
    }).show(); 
});

使用colorSet可以改变颜色。

来源

2012-11-28 11:28:06

图表使用主题为混入

这样你就可以直接使用主题属性称为themeAttrs。

例如，如果你在列/堆积柱形图的构造，想改变列的颜色可以指定

this.themeAttrs.colors = ['#F2C72B','#a5c249','#E88712','#9D5FFA'];

来源

2013-03-28 10:36:09 Sandesh

我决定加入全码：

Ext.require('EAM.view.chart.*'); 
Ext.define('EAM.view.chart.integral.IntegralChart', 
{ 
    extend : 'Ext.chart.Chart', 
    alias : 'widget.GroupsIntegralChart', 
    animate : true, 
    shadow : true, 
    // theme : 'Browser:gradients', 

    initComponent : function() 
    { 
     var me = this; 
     me.themeAttrs.colors = 
     [ 
      'orange', 
      'red', 
      'blue', 
      'green', 
     ]; 
     me.callParent(arguments); 
    }, 
...

来源

2013-05-10 00:31:02 user2368285

如果您不想使用主题，你可以用这个（至少对我有效）：

this.series = [{ 
type: 'column', 
axis: 'left', 
showInLegend : true, 
xField: 'f1', 
style :{ 
    fill : '#ff00ff', 
    'stroke-width': 3, 
    width: 20 
}, 
renderer: function(sprite, storeItem, barAttr, i, store) { 
    barAttr.fill = '#ff00ff'; 
    barAttr.width = 20; 
    return barAttr; 
}, 
title : 'title', 
yField: 'f2' 
}]

请注意，你必须把你的颜色放在两个不同的线条中（我认为ExtJS有时是一个很愚蠢的框架）。

来源

2013-12-03 14:41:36 toni07

我使用的是Ext JS 5.0 有没有必要担心，只需在系列中包含颜色配置。

series : [{ 
     type : 'bar', 
     colors:['#f23f3f','#ff8809','#ff0','#0039a6','#00ee88','#ff8aed'], 
     xField : ['Q1'] 
     yField : ['Critical', 'Major', 'Minor', 'Warning', 'Informational', 'Indeterminent'] 
}]

来源

2014-12-31 13:33:36

Extjs改变堆叠条形图中条形的颜色

回答

相关问题