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

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

pie
首先到網站去下載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
  1. var data= [{label: "Used Space: 0.01 GB",  data: 1},   
  2. {label: "Free Space: 31.65 GB",  data: 316}];  

如果要更改每個資料的顏色,可以加上color
  1. var data= [{label: "Used Space: 0.01 GB",  data: 1, color: "#3b8db3"},   
  2. {label: "Free Space: 31.65 GB",  data: 316, color: "#d82f83"}];  

然後照範例改成你要的樣子
  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的說明在下面,大概對照一下就可以使用了。

留言

熱門文章