jqPlot图表插件学习之折线图-散点图-series属性

一、准备工作

首先我们需要到官网下载所需的文件：

官网下载（笔者选择的是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="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