如何畫Flot圓餅圖

圓餅圖是用於看各組資料間的比例,用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繪圖的定位點.
   
        <div id="flot-placeholder" style="width:400px;height:300px"></div>
        
建立圓餅圖所用的資料比其它的圖表來得簡單,首先我們建立一個叫dataSet的陣列變數,並依序插入6個物件資料.label屬性為各大洲的名稱,設定data屬性各大洲的人口數,在這裡你只要輸入原始數字後Flot會自動幫我們算出百分比,另外color屬性則是指定圓餅圖區塊的顏色.
   
        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>
        
要使用"plothover"事件前,需要將選項中的grid.hoverable設為true,如此才能在滑鼠移過圖表上方時觸發事件.
   
        grid: {
            hoverable: true
        }
        
再來建立一個自訂函式叫"showMemo",在函式裡綁定"plothover"事件的,此事件傳入item物件,我們就可以從item.series.color取得資料序列的顏色,從item.series.label取得資料的標籤名稱,最後就是我們要的原始資料,從item.series.data可以取得滑鼠停留在區塊上方時該區塊的資料, 而item.series.data[0][1]就是我們要的資料.最後再把資料顯示在#flot-memo裡即可.
   
        $.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(''));
            });
        }
        
最後呼叫$.plot並帶入資料及選項, 並且別忘了呼叫showMemo().
   
        $(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
                    }
                }
            }
        };
        

練習

本章的完整範例程式碼可以在這裡找到並做線上練習 Go to Example Tester