【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>


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值