Extjs设置柱状图柱子颜色和每条柱子颜色

来源：互联网发布：python 字符串编辑：程序博客网时间：2024/04/29 14:42

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

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

The name of the theme to be used. A theme defines the colors andother visual displays of tick marks on axis, text, title text, line colors, marker colors and styles, etc.Possible theme values are 'Base', 'Green', 'Sky', 'Red', 'Purple', 'Blue', 'Yellow' and also six category themes'Category1' to 'Category6'. Default value is 'Base'.

所以，改变柱子的颜色可以改变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;  }