extjs chart 自定义颜色

最新推荐文章于 2022-11-15 11:20:54 发布

小小IT人

最新推荐文章于 2022-11-15 11:20:54 发布

阅读量3.3k

点赞数

分类专栏： web开发文章标签： Ext JS rgb 扩展

web开发专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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个则需要向上面那样自定义样式。

本文出自 “雨の吢聲” 博客，请务必保留此出处http://angelgirl.blog.51cto.com/1695763/1212726