jqPlot圖表插件學習之餅狀圖和環狀圖

一、准備工作

      官網下載（筆者選擇的是jquery.jqplot.1.0.8r1250.zip這個版本）

 

 

      然后讀者需要根據自己的情況新建一個項目並且按照如下的方式加載對應的js和css（因為筆者在VS2012環境下新建的，並且所需的js和css都會對應的放到js和css文件夾下，請讀者根據自己的情況修正加載的路徑）。

<link href="css/jquery.jqplot.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.jqplot.min.js"></script>
    
<!--[if lt IE 9]>
<script src="js/excanvas.min.js"></script>
<![endif]-->
<script src="js/jqplot.pieRenderer.min.js"></script>
<script src="js/jqplot.donutRenderer.min.js"></script>

      其中最后一個js文件在plugins下，今后會經常使用到這個文件夾下的文件，因為他們是很多擴展功能所需的文件。除了引用基本的文件之后我們還需要放置一個占位符用來作為圖表的容器，我們需要放置一個寬度為500高度為300的DIV:

 

<div id="chart" style="width:500px;height:300px;" ></div>

 

 

 

二、正文

      這節我們將圍繞餅狀圖展開介紹，首先是最常規的餅狀圖，所以我們這里就需要PieRenderer來負責渲染，所以必須要引用jqplot.pieRenderer 這個庫，然后我們就通過一段代碼來實現圖1.1的效果：

        $(function () {

            var data = [
            ['Heavy Industry', 12], ['Retail', 9], ['Light Industry', 14],
            ['Out of home', 16], ['Commuting', 7], ['Orientation', 9]
            ];

            $.jqplot('chart', [data], {
                seriesDefaults: {
                    renderer: $.jqplot.PieRenderer,
                    rendererOptions: {
                        showDataLabels: true
                    }
                },
                legend: {
                    show: true,
                    location: "e"
                }
            });
        });

      其中沒有什么需要特別說明的，通過前面幾節的學習，大家一定知道renderer屬性的含義，也能夠明白以后只要是顯示非折線，就會使用到這個屬性來指定圖表，而rendererOptions則是對renderer設置的圖表的附加屬性，所以具體的參數項要根據具體使用的圖表而定，比如這里使用了餅狀圖，所以showDataLabels則表示餅狀圖中是否顯示所占比例數。最后一個就是legend了，用來指定不同顏色所對應的數據項。

 

圖1.1

 

 

 

      除了這種最普通的餅狀圖，我們還可以制作出其他的餅狀圖，比如下面的代碼我們通過rendererOptions中的部分屬性將可以制作出圖1.2所示的餅狀圖：

 

        $(function () {

            var data = [
            ['Heavy Industry', 12], ['Retail', 9], ['Light Industry', 14],
            ['Out of home', 16], ['Commuting', 7], ['Orientation', 9]
            ];

            $.jqplot('chart', [data], {
                seriesDefaults: {
                    renderer: $.jqplot.PieRenderer,
                    rendererOptions: {
                        showDataLabels: true,
                        fill: false,
                        lineWidth: 5,
                        sliceMargin: 4
                    }
                },
                legend: {
                    show: true,
                    location: "e"
                }
            });
        });

 

      這里的fill表示是否填充整個餅狀圖，另外兩個屬性通過字面的意思也能夠得出分別是邊框寬度和外邊距。

 

圖1.2

 

 

 

      當然還有跟餅狀圖類似的圖形，只是它不僅僅只是外面有，內部還有一個環，它的名字就是環狀圖，通過下面的代碼我們將創建圖1.3的環狀圖：

        $(function () {

            var s1 = [['a', 6], ['b', 8], ['c', 14], ['d', 20]];
            var s2 = [['a', 8], ['b', 12], ['c', 6], ['d', 9]];

            $.jqplot('chart', [s1,s2], {
                seriesDefaults: {
                    renderer: $.jqplot.DonutRenderer,
                    rendererOptions: {
                        showDataLabels: true,
                        sliceMargin: 4,
                        dataLabels: 'value',
                        startAngle: -90
                    }
                },
                legend: {
                    show: true,
                    location: "e"
                }
            });
        });

      其中rendererOptions中又多了幾個屬性，分別是dataLabels和startAngle，dataLabels表示showDataLabels顯示的數據是顯示百分比還是直接顯示數據中的數字，而startAngle則表示環狀圖起始的位置，比如這里的-90表示從12點鍾方向開始，默認是從9點鍾方向順時針開始的。

 

圖1.3