用jquery畫圓餅圖(pie chart)- Flot

想在網頁也畫一個資訊圖表嗎? 可以來試試flot


首先到網站去下載plugin，因為手邊的專案是需要畫一個pie chart，所以這邊就pie chart來介紹。

首先先把plugin引入

<script language="javascript" type="text/javascript" src="flot/excanvas.min.js"></script>
<script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="flot/jquery.flot.pie.js"></script>

第二個plugin是flot.js的核心，第三個則是要畫pie chart要用的，第一個則是解決ie沒辦法正常呈現的js。

然後可以到pie chart範例頁看一下怎麼使用。

準備data

view plaincopy to clipboardprint

1. var data= [{label: "Used Space: 0.01 GB",  data: 1},   
2. {label: "Free Space: 31.65 GB",  data: 316}];  

如果要更改每個資料的顏色，可以加上color

view plaincopy to clipboardprint

1. var data= [{label: "Used Space: 0.01 GB",  data: 1, color: "#3b8db3"},   
2. {label: "Free Space: 31.65 GB",  data: 316, color: "#d82f83"}];  

然後照範例改成你要的樣子

view plaincopy to clipboardprint

1. $.plot($("#pie"), data,   
2. {   
3.         series: {   
4.             pie: {   
5.                 show: true,   
6.                 radius: 1,   
7.                 label: {   
8.                     show: true,   
9.                     radius: 3/4,   
10.                     formatter: function(label, series){   
11.                         return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';   
12.                     },   
13.                     background: { opacity: 0.5 }   
14.                 }   
15.             }   
16.         },   
17.         legend: {   
18.             show: false  
19.         }   
20. });  

API的說明在下面，大概對照一下就可以使用了。