[Ext JS 4] 实战之Chart, Column Chart 定制颜色| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS 4] 实战之Chart, Column Chart 定制颜色

## [Ext JS 4] 实战之Chart, Column Chart 定制颜色
### 前言
![](/upload/picture/2022-09-29/upload_c59c598cea94bd5b7571b449cb6181a1.png)
在Ext js 中,可以绘制柱状图和条状图。
柱状图 -- Column chart,  柱子是竖直方向的。
条状图 -- Bar Chart, 柱子是水平方向的。
上面的例子一个条状图的例子。
默认状况下， Ext Js 会使用 绿色，蓝色，深红，淡红这样的顺序来配色。
如果查看Ext js 源代码， 在 chart.theme目录下的 Base.js 文件中，有以下的代码,
```css
colors: [ "#94ae0a", "#115fa6","#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"],
```
其实不难理解， Ext js 默认使用Base 这种主题来配置图形的颜色。
而实际开发过程中， 我们有给图形定制自己的颜色的需求， 如何实现？
总体来说，实现的方法有两种：
1.  定义新的theme ,并给出自己需要的颜色序列。(在图绘制之前)
2. 配置 chart  的series  item 的 renderer.(图绘制前后都可以)
下面细部来看一下两种方式的实现方式。

### 定义新的Chart Theme 来定制图形颜色
1. 定义新的Theme, 例如：
```css
var colors = ['#6E548D','#94AE0A','#FF7348','#3D96AE'];
Ext.define('Ext.chart.theme.MyFancy', {
extend: 'Ext.chart.theme.Base',       
constructor: function(config) {
this.callParent([Ext.apply({
colors: colors
        }, config)]);
    }
});
这里定义了一个MyFancy 的Theme
2.  在Chart 中， 使用这个Theme
var chart = Ext.create('Ext.chart.Chart',{
theme: 'MyFancy',
animate: true,
shadow: true,
store: store,
legend: {
position: 'top'
            },
axes: [{
type: 'Numeric',
position: 'left',
//position: 'bottom',   
fields: ['buildpass', 'buildfail', 'sanitypass', 'sanityfail'],
title: 'Times',
grid: true,
label: {
renderer: function(v) {
//return String(v).replace(/(.)00000$/, '.$1M');
//return String(v).replace(/(.)0000000$/, '$1');
returnString(v);
                    }
                }
            }, {
type: 'category',
//position: 'left',
position: 'bottom',
fields: ['day'],
title: 'Date'
            }],
series: [{
//type: 'bar',
type: 'column',
//axis: 'bottom',
//showInLegend: false,
axis: 'left',
gutter: 80,
xField: 'day',
yField: ['buildpass', 'buildfail', 'sanitypass', 'sanityfail'],
label: {
display: 'insideEnd',
field: ['buildpass', 'buildfail', 'sanitypass', 'sanityfail']
                },
stacked: true,
tips: {
trackMouse: true,
width: 65,
height: 28,
renderer: function(storeItem, item) {
//this.setTitle(String(item.value[1] / 1000000) + 'M');
this.setTitle(String(item.value[1]));
                    }
                },
listeners:{
itemclick:{
fn:function(){alert("11");}
                	}
                } 
            }]
        });
```
theme: 'MyFancy' 就是使用这个 theme 的方式。
除了颜色之外， Theme 还可以定义其他的一些配置： 像
```css
Ext.define('Ext.chart.theme.Fancy', {
extend: 'Ext.chart.theme.Base',
constructor: function(config) {
this.callParent([Ext.apply({
axis: {
stroke: baseColor
                },
axisLabelLeft: {
fill: baseColor
                },
axisLabelBottom: {
fill: baseColor
                },
axisTitleLeft: {
fill: baseColor
                },
axisTitleBottom: {
fill: baseColor
                },
colors: colors
            }, config)]);
        }
    });
```

### 设置Series item 的render
有的状况可能图已经绘制出来了， 使用theme 就无效了。
这里以柱状图为例。
在创建Chart 的时候， 我们设置了一些Series ,
比如说一个柱状图和一个折线图，  这样Series 就有两个了。
使用 iChart.series.items[0]，iChart.series.items[1] 就可以分别得到每个Series 了。
(这里的iChart 是创建出来的Chart 对象)
```css
  iChart.series.items[0].renderer = function(sprite, storeItem, barAttr, i, store) {
        	barAttr.fill = colors[0];
			return barAttr;
        };
```
使用以上方式就可以变换图的颜色了。
这里 i 的参数就是每个柱子的序列号(比如图有12 根柱子就是 0 到 11 了)
接下来有一个问题， 如果这个柱状图的每个柱子又有三个子柱的话（或stacked 为true, 三个柱子堆叠在一起; 或stacked 为false, 三个柱子group 方式水平）， 如何设置颜色？
```css
renderer: function(sprite, storeItem, barAttr, i, store) {
                    barAttr.fill = colors[i % 3];
return barAttr;
                },
```

使用以上方式， 用3 来循环。

图的颜色改变了， 如果有Legend 的话， Legend 也要修改才能匹配的上：
```css
        iChart.series.items[0].getLegendColor = function(index) {
return colors[0];
        };

```
### 总结
配置 chart  的series  item 的 renderer，开上去可以，
但是如果遇到有子柱 的过滤时， 就是点击legend  进行隐藏和显示的话，颜色会出现错乱， 所以还是要使用Theme的方式。
具体开发使用哪种方式， 就要根据具体的状况来对待了。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS 4] 实战之Chart, Column Chart 定制颜色

网站导航