今天看啥
热点:

[ExtJs]饼状图


ExtJs饼状图没有《【ExtJs】柱状图,改变每条柱子的颜色》(点击打开链接)这么难做,因为其每块拼饼的颜色都是天生不同的,不用自己写渲染器。关键是做好动画效果。

 

一、基本目标

比如如下图的带动画的ExtJs饼状图效果。鼠标悬停到某块拼饼上面,会突出出来。

\

 

二、制作过程

还是与《【ExtJs】柱状图,改变每条柱子的颜色》(点击打开链接)、《【ExtJs】折线图》(点击打开链接)一样,在ExtJs4中的任意图表都要先定义对应的模型与数据中心。

 

	 	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:50}	
			]
		});
之后,关键是柱状图的绘制,详情见注释:

 

 

		var chart = new Ext.chart.Chart({
			width: 480,
			height: 400,
			store: graphDataStore,
			renderTo: Ext.getBody(),
			shadow: false,//一定会关闭阴影,否则拼饼突出的时候很不好看。
			series: [{
				type: 'pie',
				field: 'graphData',
				label: {//这里能够使拼饼上面显示,该拼饼属于的部分
					field: 'graphName',
					display: 'rotate',
					font: '18px Arial'
				},
    			highlight: {//这里是突出效果的声明,margin越大,鼠标悬停在拼饼上面,拼饼突出得越多
              		segment: {
                		margin: 5
              		}
            	},
				animate: true
			}]
		});
 

 




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



 

www.bkjia.comtruehttp://www.bkjia.com/Javascript/993901.htmlTechArticle[ExtJs]饼状图 ExtJs饼状图没有《【ExtJs】柱状图,改变每条柱子的颜色》(点击打开链接)这么难做,因为其每块拼饼的颜色都是天生不同的...

相关文章

帮客评论

视觉看点