Extjs4 chart颜色设置

1、Extjs中columnchart的柱子颜色设置

只要设置chart的theme即可，官方文档中theme的定义为：

所以，改变柱子的颜色可以改变theme的值，如果theme中的定义的值不符合你的颜色，也可以扩展theme

 

  var colors = ['rgb(212, 40, 40)'];
 Ext.define('Ext.chart.theme.Fancy', {
        extend: 'Ext.chart.theme.Base',
        
        constructor: function(config) {
            this.callParent([Ext.apply({
                colors: colors
            }, config)]);
        }
    });

 

2、Extjs中columnchart的每个柱子颜色设置

      首先定义柱子颜色：

 var colors = ['rgb(212, 40, 40)',
                  'rgb(180, 216, 42)',
                  'rgb(43, 221, 115)',
                  'rgb(45, 117, 226)',
                  'rgb(187, 45, 222)'];

然后再series中定义renderer属性的函数 

 

 

 function(sprite, storeItem, barAttr, i, store) {
                    barAttr.fill = colors[i % colors.length];
                    return barAttr;
  }

LineChart线条颜色不够：

 

对于多于5个线条的LineChart，如果定义了Theme属性，那么LineChart的线条颜色就有重复的，这样去掉Theme属性，就可以使用Base.js中的colors定义的颜色，colors有9个颜色值，如果线条超过9个则需要向上面那样自定义样式。