[ExtJs]餅狀圖

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