jqPlot图表插件学习之轴说明和label属性

2014-09-18 12:16 y-z-f 阅读(3932) 评论(3) 编辑收藏举报

一、准备工作

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

官网下载（笔者选择的是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 
 9 <script src="js/jqplot.canvasTextRenderer.js"></script>
10 <script src="js/jqplot.canvasAxisLabelRenderer.js"></script>

其中最后两个js文件在plugins下，今后会经常使用到这个文件夹下的文件，因为他们是很多扩展功能所需的文件。除了引用基本的文件之后我们还需要放置一个占位符用来作为图表的容器，我们需要放置一个宽度为500高度为300的DIV:

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

二、正文

下面我们接着上节的知识继续学习，上节我们学习了简单的折线图等等，同时还学习了有关如何说明X和Y轴的方式，下面我们将演示默认情况下轴说明的形式，结果如图1.1：

 1         $(function () {
 2             var cosPoints = [];
 3             for (var i = 0; i < 2 * Math.PI; i += 0.1) {
 4                 cosPoints.push([i, Math.cos(i)]);
 5             }
 6             $.jqplot("chart", [cosPoints], {
 7                 series: [{ showMarker: false }],
 8                 axes: {
 9                     xaxis: {
10                         label: "Angle(radians)"
11                     },
12                     yaxis: {
13                         label: "Cosine"
14                     }
15                 }
16             });
17         });

这里唯一需要说明的就是showMarker属性，当设置这个属性为false后原本的折线图中存在的节点就会消失，从而变成单一的线条。

图1.1

上节我们介绍了如何设置所有轴说明的文字的引擎，而下面我们将介绍如何单一的指定某个轴的说明文字的引擎，通过如下代码将可以看到图1.2所示的效果：

 1         $(function () {
 2             var cosPoints = [];
 3             for (var i = 0; i < 2 * Math.PI; i += 0.1) {
 4                 cosPoints.push([i, Math.cos(i)]);
 5             }
 6             $.jqplot("chart", [cosPoints], {
 7                 series: [{ showMarker: false }],
 8                 axes: {
 9                     xaxis: {
10                         label: "Angle(radians)",
11                         labelRenderer: $.jqplot.CanvasAxisLabelRenderer
12                     },
13                     yaxis: {
14                         label: "Cosine",
15                         labelRenderer: $.jqplot.CanvasAxisLabelRenderer
16                     }
17                 }
18             });
19         });

我们可以看到原本在axesDefaults里设置的属性也可以在axes下对应方向的轴中也一样可以设置的。

图1.2

当然除了这些我们还可以通过labelOptions设置更详细的字体和字体大小属性，通过下面的代码我们将可以修改字体和字体大小，通过图1.3可以看到最后的效果，如果是在不兼容canvas的浏览器下是不起作用的：

 1         $(function () {
 2             var cosPoints = [];
 3             for (var i = 0; i < 2 * Math.PI; i += 0.1) {
 4                 cosPoints.push([i, Math.cos(i)]);
 5             }
 6             $.jqplot("chart", [cosPoints], {
 7                 series: [{ showMarker: false }],
 8                 axes: {
 9                     xaxis: {
10                         label: "Angle(radians)",
11                         labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
12                         labelOptions: {
13                             fontFamily: 'Georgia, Serif',
14                             fontSize: '12pt'
15                         }
16                     },
17                     yaxis: {
18                         label: "Cosine",
19                         labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
20                         labelOptions: {
21                             fontFamily: 'Georgia, Serif',
22                             fontSize: '12pt'
23                         }
24                     }
25                 }
26             });
27         });