圓餅圖是用於看各組資料間的比例,用Flot繪製圓餅圖相當簡單,不過Flot需要加入jquery.flot.pie.js外掛程式才能給製圓餅圖,我們沿用上一章用過的世界人口資料來當作圓餅圖的資料來源,並且加入一些互動功能呈現.
圓餅圖範例 (世界人口比例)
圓餅圖資料
因為Flot不支援圓餅圖,所以必須加入圓餅圖的外掛程式jquery.flot.pie.js,此範例會用到的檔案清單如下.<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script> <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]--> <script type="text/javascript" src="/js/flot/jquery.flot.js"></script> <script type="text/javascript" src="/js/flot/jquery.flot.pie.js"></script>
<div id="flot-placeholder" style="width:400px;height:300px"></div>
var dataSet = [ {label: "Asia", data: 4119630000, color: "#005CDE" }, { label: "Latin America", data: 590950000, color: "#00A36A" }, { label: "Africa", data: 1012960000, color: "#7D0096" }, { label: "Oceania", data: 35100000, color: "#992B00" }, { label: "Europe", data: 727080000, color: "#DE000F" }, { label: "North America", data: 344120000, color: "#ED7B00" } ];
圓餅圖選項
圓餅圖的選項設定都在series.pie裡,要讓Flot繪製圓餅圖就要設定series.pie.show為true.另外我們自訂了圓餅圖的標籤,預設圓餅圖會自動顯示圖例,但如果你想改成顯示標籤時,可設定legend.show為false,Flot就不會顯示圖例而改顯示標籤.標籤部份我們更改了幾個地方,label.radius是設定標籤出現在圓餅圖的半徑位置,如果值是設置0到1之間,那就會用作容器可用空間大小的百分比,如果值是設定大於等於1的話,則會用作像素.
另外我們自訂了label.formatter,此函式可用來自訂顯示標籤.我們還設定了label.background.opacity,用來指定標籤背景的透明度,而label.background.color則用來設定標籤背景顏色.
series: { pie: { show: true, label: { show:true, radius: 0.8, formatter: function (label, series) { return '' + label + ' : ' + Math.round(series.percent) + '%'; }, background: { opacity: 0.8, color: '#000' } } } }
圓餅圖互動功能
因為圓餅圖標籤預設只能顯示百分比資料,但如果我們想要知讓使用者滑鼠移到圓餅圖區塊上就可以顯示該區塊的原始數據的話,可以用Flot內建的"plothover"事件來完成.首先我們先在定位點下方插入一個div,並給與一個id名稱flot-memo.<div id="flot-memo" style="text-align:center;height:30px;width:250px;height:20px;text-align:center;margin:0 auto"></div>
grid: { hoverable: true }
$.fn.showMemo = function () { $(this).bind("plothover", function (event, pos, item) { if (!item) { return; } var html = []; var percent = parseFloat(item.series.percent).toFixed(2); html.push("<div style=\"border:1px solid grey;background-color:", item.series.color, "\">", "<span style=\"color:white\">", item.series.label, " : ", $.formatNumber(item.series.data[0][1], { format: "#,###", locale: "us" }), " (", percent, "%)", "</span>", "</div>"); $("#flot-memo").html(html.join('')); }); }
$(document).ready(function () { $.plot($("#flot-placeholder"), dataSet, options); $("#flot-placeholder").showMemo(); });
其它圓餅圖
圓餅圖還支援其它不同的類型,以下展示幾種不同類型的圓餅圖
傾斜圓餅圖範例
傾斜圓餅圖選項程式碼
var options = { series: { pie: { show: true, tilt: 0.5 } } };
甜甜圈圓餅圖範例
甜甜圈圓餅圖選項程式碼
var options = { series: { pie: { show: true, innerRadius: 0.5, label: { show: true } } } };