【ExtJs】饼状图

浏览数：25 / 时间：2015年06月09日

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
			}]
		});

三、总结

因此，整个pie.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: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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

【ExtJs】饼状图