[Ext JS 4] 实战之Chart, Column Chart 定制颜色
前言
在Ext js 中,可以绘制柱状图和条状图。
柱状图 -- Column chart, 柱子是竖直方向的。
条状图 -- Bar Chart, 柱子是水平方向的。
上面的例子一个条状图的例子。
默认状况下， Ext Js 会使用 绿色，蓝色，深红，淡红这样的顺序来配色。
如果查看Ext js 源代码， 在 chart.theme目录下的 Base.js 文件中，有以下的代码,
colors: [ "#94ae0a", "#115fa6","#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"],其实不难理解， Ext js 默认使用Base 这种主题来配置图形的颜色。
而实际开发过程中， 我们有给图形定制自己的颜色的需求， 如何实现？
总体来说，实现的方法有两种：
1. 定义新的theme ,并给出自己需要的颜色序列。(在图绘制之前)
2. 配置 chart 的series item 的 renderer.(图绘制前后都可以)
下面细部来看一下两种方式的实现方式。
定义新的Chart Theme 来定制图形颜色
1. 定义新的Theme, 例如：
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');
return String(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 还可以定义其他的一些配置： 像
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 对象)
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 方式水平）， 如何设置颜色？
renderer: function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i % 3];
return barAttr;
},
使用以上方式， 用3 来循环。
图的颜色改变了， 如果有Legend 的话， Legend 也要修改才能匹配的上：
iChart.series.items[0].getLegendColor = function(index) {
return colors[0];
};
总结
配置 chart 的series item 的 renderer，开上去可以，
但是如果遇到有子柱 的过滤时， 就是点击legend 进行隐藏和显示的话，颜色会出现错乱， 所以还是要使用Theme的方式。
具体开发使用哪种方式， 就要根据具体的状况来对待了。