【ExtJs】柱状图，改变每条柱子的颜色
ExtJs的柱状图的画法其实与《【ExtJs】折线图》（点击打开链接）的画法几乎完全一样，难点在于各个柱子的颜色。ExtJs对于柱状图的颜色，并没有单独为其开放独立的参数。因此还是与《【ExtJs】表格控件Grid的增删改查，利用renderer让操作列actioncolumn使用文字而不是图标》（点击打开链接）一样，要自己单独设置东西，必须使用到渲染器。如果不设置，它画出来的柱状图，每次都是同样的颜色。
网上对于这部分东西的说明，仅有极少部分的资料。而且把代码写得天花龙凤，根本读不懂。下面使用一个极其简单的例子说明这个问题。
一、基本目标
绘制如下的柱状图，同时每条柱子不同颜色。
二、制作过程
首先还是与《【ExtJs】折线图》（点击打开链接）一样，定义一个模型，在此模型上建立数据中心store，数据中心的数据可以自己写，也可以从后端页面获取。
Ext.define('graphData',{
extend:'Ext.data.Model',
fields:[
{name:'graphName',type:'string'},
{name:'graphData',type:'int'}
]
});
var graphDataStore=Ext.create('Ext.data.Store',{
model:'graphData',
data:[
{graphName:"A",graphData:700},
{graphName:"B",graphData:800},
{graphName:"C",graphData:600},
{graphName:"D",graphData:500}
]
});之后先定义一个颜色数组，为下面的渲染色做好准备。
var colors = ['#6E548D','#94AE0A','#FF7348','#3D96AE'];最后，则绘制这个柱状图，渲染器放在series的属性项中：
var chart1 = new Ext.chart.Chart({
width: 480,
height: 320,
animate: true,//使用动画
store: graphDataStore,
renderTo: Ext.getBody(),
shadow: true,//使用阴影
axes: [{//x轴与y轴的声明
type: 'Numeric',
position: 'left',
grid: true
}, {
type: 'Category',
position: 'bottom',
fields: 'graphName'
}],
series: [{
type: 'column',
axis: 'bottom',
xField: 'graphName',
yField: 'graphData',//x与y轴的数据声明
//此渲染器的存在能够使每条柱子的颜色，与上方声明的颜色数组相同
renderer: function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i];
return barAttr;
}
}]
});
三、总结
因此，整个column.html页面代码如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>柱状图</title>
<script type="text/javascript" src="../js/ext-all.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/ext-lang-zh_CN.js"></script>
<link href="../ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<script>
Ext.onReady(function(){
Ext.define('graphData',{
extend:'Ext.data.Model',
fields:[
{name:'graphName',type:'string'},
{name:'graphData',type:'int'}
]
});
var graphDataStore=Ext.create('Ext.data.Store',{
model:'graphData',
data:[
{graphName:"A",graphData:700},
{graphName:"B",graphData:800},
{graphName:"C",graphData:600},
{graphName:"D",graphData:500}
]
});
var colors = ['#6E548D','#94AE0A','#FF7348','#3D96AE'];
var chart1 = new Ext.chart.Chart({
width: 480,
height: 320,
animate: true,//使用动画
store: graphDataStore,
renderTo: Ext.getBody(),
shadow: true,//使用阴影
axes: [{//x轴与y轴的声明
type: 'Numeric',
position: 'left',
grid: true
}, {
type: 'Category',
position: 'bottom',
fields: 'graphName'
}],
series: [{
type: 'column',
axis: 'bottom',
xField: 'graphName',
yField: 'graphData',//x与y轴的数据声明
//此渲染器的存在能够使每条柱子的颜色，与上方声明的颜色数组相同
renderer: function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i];
return barAttr;
}
}]
});
});
</script>