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.canvasAxisTickRenderer.min.js"></script>
<script src="js/jqplot.canvasTextRenderer.js"></script>
<script src="js/jqplot.canvasAxisLabelRenderer.js"></script>
<script src="js/jqplot.categoryAxisRenderer.min.js"></script>
<script src="js/jqplot.barRenderer.min.js"></script>

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

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

 

 

 

二、正文

      通過前面兩節的學習，都僅僅只是折線圖，而本節我們將學習柱形圖，當然這個柱形圖還僅僅只是入門級別的，下面我們將演示如何制作出圖1.1的圖表：

        var line1 = [['Cup Holder Pinion Bob', 7], ['Generic Fog Lamp', 9], ['HDTV Receiver', 15],
  ['8 Track Control Module', 12], [' Sludge Pump Fourier Modulator', 3],
  ['Transcender/Spice Rack', 6], ['Hair Spray Danger Indicator', 18]];

        $.jqplot('chart1', [line1], {
            title: '柱狀圖',
            series: [{ renderer: $.jqplot.BarRenderer }],
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer
                }
            }
        });

 

      其中series屬性在第一節就介紹過了，主要是控制傳遞給jqplot第二個參數對應索引的數據用什么圖表去呈現，這里指定的是柱形圖。但是只指定這個還不行，因為line1不僅僅只是數據還包括每個數據對應的名稱，所以我們還需要指定X軸顯示分類名稱，所以要指定xaxis的renderer屬性。

 

圖1.1

 

 

      我們可以看到X軸顯示的字都重疊在一起了，默認情況下這些字是不會自己旋轉的，而需要借助於canvasAxisTickRenderer插件才可以，所以下面我們指定axesDefaults的tickRenderer為該引擎，並設置X軸和Y軸顯示的尺度都旋轉（圖1.2）：

        var line1 = [['Cup Holder Pinion Bob', 7], ['Generic Fog Lamp', 9], ['HDTV Receiver', 15],
  ['8 Track Control Module', 12], [' Sludge Pump Fourier Modulator', 3],
  ['Transcender/Spice Rack', 6], ['Hair Spray Danger Indicator', 18]];

        $.jqplot('chart1', [line1], {
            title: '柱狀圖',
            series: [{ renderer: $.jqplot.BarRenderer }],
            axesDefaults: {
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                    fontFamily: 'Georgia',
                    angle: -30,
                    fontSize: '10pt'
                }
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer
                }
            }
        });

      這樣我們就可以解決分類名稱過長的情況了。

 

圖1.2

 

 

      從圖中我們可以看到X軸的標記都是以尾部對齊的，而Y軸則以中間部分對其的，當然我們也可以修改他們的對齊方式，只要在tickOptions中加上labelPosition屬性並指定對應的對其方式即可，比如下面我們將設置為頭部對其（圖1.3）：

        var line1 = [['Cup Holder Pinion Bob', 7], ['Generic Fog Lamp', 9], ['HDTV Receiver', 15],
  ['8 Track Control Module', 12], [' Sludge Pump Fourier Modulator', 3],
  ['Transcender/Spice Rack', 6], ['Hair Spray Danger Indicator', 18]];

        $.jqplot('chart1', [line1], {
            title: '柱狀圖',
            series: [{ renderer: $.jqplot.BarRenderer }],
            axesDefaults: {
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                    fontFamily: 'Georgia',
                    angle: -30,
                    fontSize: '10pt',
                    labelPosition: 'start'
                }
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer
                }
            }
        });

 

 

圖1.3

 

 

      在第一節中我們設置了四條折線圖，在柱形圖中我們既然可以加上一條折線圖，並以頂部的軸為X軸，右邊的軸為Y軸標注刻度，而我們只需要修改上面的代碼為如下形式即可（圖1.4）：

        var line1 = [['Cup Holder Pinion Bob', 7], ['Generic Fog Lamp', 9], ['HDTV Receiver', 15],
  ['8 Track Control Module', 12], [' Sludge Pump Fourier Modulator', 3],
  ['Transcender/Spice Rack', 6], ['Hair Spray Danger Indicator', 18]];

        var line2 = [['Nickle', 28], ['Aluminum', 13], ['Xenon', 54], ['Silver', 47],
  ['Sulfer', 16], ['Silicon', 14], ['Vanadium', 23]];

        $.jqplot('chart1', [line1, line2], {
            title: '柱狀圖',
            series: [{ renderer: $.jqplot.BarRenderer },
                { xaxis: 'x2axis', yaxis: 'y2axis' }], //指定第二個圖表以頂部為X軸，右邊為Y軸進行刻度
            axesDefaults: {
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                    fontFamily: 'Georgia',
                    angle: -30,
                    fontSize: '10pt',
                    labelPosition: 'start'
                }
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer
                },
                yaxis: {
                    autoscale: true
                },
                x2axis: {
                    renderer:$.jqplot.CategoryAxisRenderer //指定X軸顯示分類
                },
                y2axis: {
                    autoscale: true
                }
            }
        });

      這里需要提示下的是series屬性中x2axis和y2axis，如果讀者把數字改變會導致圖表不顯示，並且我們可以看到第二個圖表是以折線的形式呈現的，因為我們沒有指定第二個圖表的形式，則默認使用折線，當然讀者也可以嘗試指定第二個圖表的呈現形式為柱形圖。

 

圖1.4