jqPlot圖表插件學習之ajax-json數據加載

一、准備工作

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

官網下載（筆者選擇的是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.json2.min.js"></script>

 

 

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

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

 

 

 

二、正文

      通過前面三節的學習我們，我們都是通過第二個參數來傳遞圖表需要的參數，但實際中往往需要通過某些方法或者通過ajax加載數據的，而jqplot已經提供了對應的擴展，我們通過重寫dataRenderer方法就可以實現，利用如下的代碼將可以實現圖1.1的效果：

        function sineRenderer() {
            var data = [[]];
            for (var i = 0 ; i < 13 ; i += 0.5) {
                data[0].push([i, Math.sin(i)]);
            }
            return data;
        }

        $(function () {
            $.jqplot('chart', [], {
                title: "通過方法返回的數據",
                dataRenderer: sineRenderer
            });
        });

 

 

      編寫起來很簡單，只要將能夠提供數據的函數賦值給jqplot的dataRenderer屬性即可，后面jqplot會主動調用我們的函數，當然還會傳遞給我們一些參數，而標准的寫法如下所示：

function(userData, plotObject, options) {
  ...
  return data;
}

 

 

圖1.1

 

 

      上面我們只是通過一個函數返回數據，下面我們將學習如何利用相同的技術來利用ajax加載數據並呈現圖表，首先我們需要在網站根目錄下新建一個test.txt文件，並在里面寫進數組，然后寫入以下代碼既可實現圖1.2的效果：

        function ajaxDataRenderer(url, plot, options) {
            var ret;
            $.ajax({
                async: false,
                url: url,
                dataType: 'json',
                success: function (data) {
                    ret = data;
                }
            });
            return ret;
        }

        $(function () {
            $.jqplot('chart', "/test.txt", {
                title: "通過方法返回的數據",
                dataRenderer: ajaxDataRenderer
            });
        });

      從中我們可以看出ajaxDataRenderer的第一參數是用來接收傳遞給jqplot第二個參數的值的。

 

圖1.2