2010年7月19日 星期一

使用 jqPlot 畫圓餅圖

在網頁上想要製作圓餅圖,免費且好看的,推薦一家:jqPlot。

實際使用後,發現 jqPlot 操作上並沒有很複雜,程式碼也相當簡潔。

看看這次實作的步驟:

首先是一堆引用的語法。

//針對 IE 瀏覽器而另外處理 (excanvas)
<!--[if IE]><script language="javascript" type="text/javascript" src="../js/excanvas.min.js"></script><![endif]--> 

<link rel="stylesheet" type="text/css" href="../css/jquery.jqplot.css" /> 

<!-- BEGIN: load jquery --> 
<script language="javascript" type="text/javascript" src="../js/jquery-1.3.2.min.js"></script> 
<!-- END: load jquery --> 

<!-- BEGIN: load jqplot --> 
<script language="javascript" type="text/javascript" src="../js/jquery.jqplot.min.js"></script> 
<script language="javascript" type="text/javascript" src="../js/jqplot.pieRenderer.min.js"></script> 
<script language="javascript" type="text/javascript" src="../js/jqplot.trendline.min.js"></script> 

<!-- END: load jqplot --> 

接著,在頁面上放置要呈現圖形的範圍:
<div id="pie" style="margin-top:20px; margin-left:20px; width:500px; height:500px;"></div>

最後,設定圖形資料的內容:
<script>$(document).ready(function(){   
  $.jqplot.config.enablePlugins = true; 
   plot1 = $.jqplot(
     'pie',
     [[['paladin(30)',30],['polly(28)',28],['hugo(35)',35],['keen(25)',25]]],
     { 
       seriesDefaults:{renderer:$.jqplot.PieRenderer, trendline:{show:true},rendererOptions:{sliceMargin:8},rendererOptions:{sliceMargin:8} },legend:{show:true} 
     }); 
 }); 
</script>

而完成後的作品如下:
觀看完成的作品後,如果你進一步希望將右上角的詳細資訊能有個連結的功能,則可以進一步去改寫圖形資料內容。譬如說,「paladin 」的資料,是由:['paladin(30)',30] 而來,而可以改寫成['<a href="#" onclick=DoLink("paladin")>paladin(30)</a>',30],如此,詳細資料裡面的 paladin 就可以支援點選功能了。此外只需要加上自行定義 的 DoLink。
<script>function DoLink(strName){alert(strName);}</script>  


3 則留言:

  1. 請問版主
    關於資料如果是0的部分
    圖繪不會有問題呢?

    回覆刪除
  2. 如果資料是 0 ,繪圖並不會有問題。只是該項目的區塊就不會顯出來,而右上角的小圖註解依然是正常的。

    回覆刪除
  3. 附上資料是 0 的圖片。
    目前將 paladin 的資料設為 0 ,所以在圓餅圖裡,就不會顯示 paladin 的資料。

    點選檢視附圖

    回覆刪除