一、准備工作
首先我們需要到官網下載所需的文件：
官網下載（筆者選擇的是jquery.jqplot.1.0.8r1250.zip這個版本）
然后讀者需要根據自己的情況新建一個項目並且按照如下的方式加載對應的js和css（因為筆者在VS2012環境下新建的，並且所需的js和css都會對應的放到js和css文件夾下，請讀者根據自己的情況修正加載的路徑）
1 <link href="css/jquery.jqplot.min.css" rel="stylesheet" /> 2 <script src="js/jquery.min.js"></script> 3 <script src="js/jquery.jqplot.min.js"></script> 4 5 <!--[if lt IE 9]> 6 <script src="js/excanvas.min.js"></script> 7 <![endif]--> 8 <script src="js/jqplot.canvasTextRenderer.js"></script> 9 <script src="js/jqplot.canvasAxisLabelRenderer.js"></script>
其中最后兩個js文件在我們下載的文件的plugins文件夾下，今后會經常使用到這個文件夾下的文件，因為他們是很多擴展功能所需的文件。除了引用基本的文件之后我們還需要放置一個占位符用來作為圖表的容器，我們需要放置一個寬度為500高度為300的DIV:
<div id="chart" style="width:500px;height:300px;" ></div>
二、正文
這里我們將介紹最簡單的折線圖，因為折線圖只需要指定一組值即可，最終會將這些值用Y軸進行表示，而X軸則表示是第幾個，比如我們在頁面中寫入如下的js語句后將可以看到圖1.1的效果：
1 $(function () { 2 $.jqplot('chart', [[1, 2, 3, 4, 5, 6, 7, 8, 9]]); 3 });
圖1.1
其中我們省略了第三個參數，所以呈現的效果是默認的，下面我們將學習第三個參數的使用，從而可以制作出各種各樣的圖表。我們可以看到這個圖表跟我們實際生活中見到的圖表差距很大，首先沒有一個標題，在Y軸和X軸上也沒有對應的說明，下面我們將充實它，我們將上面的js腳本改寫成如下后將可以看到圖1.2的效果：
1 $(function () { 2 $.jqplot('chart', [[1, 2, 3, 4, 5, 6, 7, 8, 9]], { 3 title: "折線圖", //圖表標題 4 axesDefaults: { 5 labelRenderer: $.jqplot.CanvasAxisLabelRenderer //設置X和Y軸的說明文字的渲染引擎 6 }, 7 axes: { 8 xaxis: { 9 label: "X軸", //指定X軸的說明文字 10 pad: 0 //指定X軸的縮放因子，當這個值大於1后我們的圖表會縮放 11 }, 12 yaxis: { 13 label: "Y軸" //指定Y軸的說明文字 14 } 15 } 16 }); 17 });
雖然其中已經對部分參數進行了說明，但是我們還需要理解axesDefaults和axes之間的關系，其中axesDefaults中的設置會針對所有方向軸，而axes則可以讓我們單獨的指定X軸的設置或者Y軸的設置，當然實際中並不是只有這兩個軸，后面我們會學習到他們（如果讀者不設置labelRenderer則X軸和Y軸的顯示效果如圖1.3所示）
圖1.2
圖1.3
注：這里我們可以認識到jqPlot的強大，它將很多的功能都以插件的方式單獨放置各個js文件中，並且在我們需要使用時引入並設置對應的引擎即可，就好比這個的labelRenderer。
前面的例子我們都只顯示一條折線，下面的我們將會在上面顯示四條折線，並且我們還會設置不同折線的樣式，我們將上面的改寫成如下后將可以看到圖1.4的效果：
1 $(function () { 2 $.jqplot('chart', [[1, 2, 3, 4, 5, 6, 7, 8, 9], 3 [-1, -2, -3, -4, -5, -6, -7, -8, -9], 4 [11, 12, 13, 14, 15, 16, 17, 18, 19], 5 [-11, -12, -13, -14, -15, -16, -17, -18, -19]], { 6 title: "折線圖", //圖表標題 7 axesDefaults: { 8 labelRenderer: $.jqplot.CanvasAxisLabelRenderer //設置X和Y軸的說明文字的渲染引擎 9 }, 10 axes: { 11 xaxis: { 12 label: "X軸", //指定X軸的說明文字 13 pad: 0 //指定X軸的縮放因子，當這個值大於1后我們的圖表會縮放 14 }, 15 yaxis: { 16 label: "Y軸" //指定Y軸的說明文字 17 } 18 }, 19 series: [{ 20 lineWidth: 2, //指定折線的寬度 21 markerOptions: { style: "dimaond" } //指定折線的樣式 22 }, 23 { 24 showLine: false, //指定是否顯示線條 25 markerOptions: { size: 7, style: "x" } //size設置每個節點的大小 26 }, 27 { 28 markerOptions: { style: "circle" } 29 }, 30 { 31 lineWidth: 5, 32 markerOptions: { style: "filledSquare", size: 10 } 33 } 34 ] 35 }); 36 });
其中我們又學了新的屬性series，這個屬性的作用是用來設置每個線條的屬性，而它的類型是數組，根據上面的學習我們也能夠得出一定存在seriesDefaults屬性。而最后的呈現樣式會順序的設置，如果有5組數據，則會從1開始套用到第4個然后再回到第1個樣式繼續賦予。
圖1.4
