使用 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>  

官網：http://www.jqplot.com/index.php