實際使用後,發現 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>
請問版主
回覆刪除關於資料如果是0的部分
圖繪不會有問題呢?
如果資料是 0 ,繪圖並不會有問題。只是該項目的區塊就不會顯出來,而右上角的小圖註解依然是正常的。
回覆刪除附上資料是 0 的圖片。
回覆刪除目前將 paladin 的資料設為 0 ,所以在圓餅圖裡,就不會顯示 paladin 的資料。
點選檢視附圖