jqPlot圖表插件學習之軸說明和label屬性

一、准備工作

      首先我們需要到官網下載所需的文件：

官網下載（筆者選擇的是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.canvasTextRenderer.js"></script>
<script src="js/jqplot.canvasAxisLabelRenderer.js"></script>

 

 

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

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

 

 

 

二、正文

      下面我們接着上節的知識繼續學習，上節我們學習了簡單的折線圖等等，同時還學習了有關如何說明X和Y軸的方式，下面我們將演示默認情況下軸說明的形式，結果如圖1.1：

        $(function () {
            var cosPoints = [];
            for (var i = 0; i < 2 * Math.PI; i += 0.1) {
                cosPoints.push([i, Math.cos(i)]);
            }
            $.jqplot("chart", [cosPoints], {
                series: [{ showMarker: false }],
                axes: {
                    xaxis: {
                        label: "Angle(radians)"
                    },
                    yaxis: {
                        label: "Cosine"
                    }
                }
            });
        });

      這里唯一需要說明的就是showMarker屬性，當設置這個屬性為false后原本的折線圖中存在的節點就會消失，從而變成單一的線條。

 

圖1.1

 

 

      上節我們介紹了如何設置所有軸說明的文字的引擎，而下面我們將介紹如何單一的指定某個軸的說明文字的引擎，通過如下代碼將可以看到圖1.2所示的效果：

        $(function () {
            var cosPoints = [];
            for (var i = 0; i < 2 * Math.PI; i += 0.1) {
                cosPoints.push([i, Math.cos(i)]);
            }
            $.jqplot("chart", [cosPoints], {
                series: [{ showMarker: false }],
                axes: {
                    xaxis: {
                        label: "Angle(radians)",
                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                    },
                    yaxis: {
                        label: "Cosine",
                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                    }
                }
            });
        });

      我們可以看到原本在axesDefaults里設置的屬性也可以在axes下對應方向的軸中也一樣可以設置的。

 

圖1.2

 

 

 

      當然除了這些我們還可以通過labelOptions設置更詳細的字體和字體大小屬性，通過下面的代碼我們將可以修改字體和字體大小，通過圖1.3可以看到最后的效果，如果是在不兼容canvas的瀏覽器下是不起作用的：

        $(function () {
            var cosPoints = [];
            for (var i = 0; i < 2 * Math.PI; i += 0.1) {
                cosPoints.push([i, Math.cos(i)]);
            }
            $.jqplot("chart", [cosPoints], {
                series: [{ showMarker: false }],
                axes: {
                    xaxis: {
                        label: "Angle(radians)",
                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                        labelOptions: {
                            fontFamily: 'Georgia, Serif',
                            fontSize: '12pt'
                        }
                    },
                    yaxis: {
                        label: "Cosine",
                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                        labelOptions: {
                            fontFamily: 'Georgia, Serif',
                            fontSize: '12pt'
                        }
                    }
                }
            });
        });

 

 

圖1.3