八、jqPlot 简介
Abstract
从这一章开始，你将开始本书的第二部分，关于 jqPlot 库。在本章的课程中，你将会被介绍到这个库的基本概念。在了解了库的结构和组成库的文件之后，您将开始理解只使用几行代码制作图表是多么容易。
从这一章开始，你将开始本书的第二部分，关于 jqPlot 库。在本章的课程中，你将会被介绍到这个库的基本概念。在了解了库的结构和组成库的文件之后，您将开始理解只使用几行代码制作图表是多么容易。
通过一系列的例子，并通过插件的使用，你将逐渐学会如何表示任何类型的图表。一切都将使用$.jqPlot()函数来完成，它的三个参数描述了 jqPlot 库的所有特性:目标画布、输入数据数组和 options 对象。
最后，在简要说明了如何通过使用级联样式表(CSS)样式定制图表之后，您将快速了解模块思维如何使您的实现有序、可维护和可重用。因此，让我们开始介绍这个奇妙的图书馆。
jqPlot 库
jqPlot 是一个 JavaScript 库，专门用于在网页中生成图表。jqPlot 完全用纯 JavaScript 编写，是一个开源项目，自 2009 年以来由 Chris Leonello 完全开发和维护。当扩展时，jQuery 库达到了它的全部潜在功能。正是由于这个原因，除了它的简单性，jqPlot 是当今最流行的图表表示库之一。
jqPlot 非常成功，几乎取代了其他以前的库，比如 Flot，jqPlot 保留了它的许多方面，包括外观和感觉。事实上，jqPlot 的作者经常承认他是 Flot 的忠实用户，但是随着时间的推移，他开始意识到它的局限性。旧图书馆缺乏许多功能；此外，其架构的构建方式使其难以扩展。因此，Leonello 觉得有必要创建一个新的图书馆，保留 Flot 中所有好的东西，但允许它发展。因此，他完全重写了它的架构。jqPlot 具有高度模块化的结构，正如您将看到的，它基于大量的插件，每个插件都扮演一定的角色。因此，它最大的特点是它的可插拔性。用户绘制的每一个对象，无论是线条、轴、阴影还是网格本身，都由一个插件来处理。每个绘图元素都有可定制的设置选项，每个添加的插件都可以扩展绘图的功能。
插件的数量逐渐增加，进一步扩大了库的目标。jqPlot 现在是一个多功能和可扩展的库，适合那些想在几个步骤中开发专业图表的人。
在大多数情况下，jqPlot 允许您绘制漂亮的图表，而无需添加太多行代码。事实上，您将会看到 jqPlot(也许比 jQuery 更好)已经接受了“少写多做”的理念。我认为这是图书馆最受赞赏的方面。每天都有越来越多的开发者被添加到 jqPlot 用户列表中。
包括基本档案
当您决定利用 jqPlot 在您的网站上绘制图表时，首先需要包含一组关键文件。
如前所述，jqPlot 本质上是 jQuery 的扩展，因此使用它需要包含 jQuery 插件(见表 8-1 )。您可以从 jqPlot 官方网站( www.jqplot.com )下载这个插件，以及组成 jqPlot 库的所有其他插件，包括 CSS 文件。根据发布版本的不同，这些文件被分组到不同的发行版中。
Note
本书中的所有示例都使用 jqPlot 库的 1.0.8 版本。
表 8-1。
The distributions of jqPlot and versions of jQuery on which they are based
| jqbatch 版本 | jQuery 版本 | | --- | --- | | 1.0.6–1.0.8 | 1.9.1 | | 1.0.2–1.0.5 | 1.6.4 |
但是，有一小部分文件代表了库的核心，如果您想包含 jqPlot 提供的所有功能，这些文件是必不可少的。这组基本文件由 jQuery 插件、jqPlot 插件和一个 jqPlot CSS 文件组成。还有另一个文件需要导入，但只有当您希望在低于版本 9 的 Internet Explorer 浏览器中加载页面时才需要导入:ExplorerCanvas (excanvas)脚本。这个可选文件弥补了 HTML5 引入的画布功能的不足。
因此，在您的 web 页面的<head></head>标记中，您将包含这些文件(有关如何设置工作区的更多信息，请参见附录 A):
<!--[if lt IE 9]><script type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="../src/jquery.min.js"></script>
<script type="text/javascript" src="../src/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.min.css" />
除了在本地使用 jqPlot 库，通过从网站下载，您还可以使用内容交付网络(CDN)服务，就像您使用 jQuery 一样。jsDelivr ( www.jsdelivr.com/#!jqplot )是一个 CDN 网站，提供 jqPlot 的所有最新发行版。如果您想使用此服务，可以按如下方式修改 URL:
<!--[if lt IE 9]><script type="text/javascript" src="http://cdn.jsdelivr.net/excanvas/r3/excanvas.js]-->>
<script src="http://code.jquery.com/jquery-1.9.1.min.js>>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.jsT2】
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.cssT2】
您很快就会发现，在网络中，您会遇到类似的文件，有些带有缩写“min”(表示“minified”)。您应该总是尝试使用最小版本，这些文件的压缩版本。它们加载速度更快。只有当您打算在内部修改这些库时，才应该使用它们的普通版本(不带“min”)。
绘图基础
现在您已经看到了 jqPlot 库是如何构造的，并且查看了操作它所需的文件集，您可以开始学习如何在您的 web 页面中使用这些文件。在图表开发中，有两个基本步骤:创建一个表示图表的区域，并插入一个 JavaScript 代码部分，该代码需要调用 jqPlot 库提供的所有函数、变量和一系列对象。
添加绘图容器
在第 3-7 章中，您看到了画布是如何被用作开发图表的绘图区域的。类似地，jqPlot 库需要在 HTML 页面的<body>部分定义一个容器(一个元素)。这个容器将作为库的画布。
在本章中，该容器被称为目标。在一个网页中，每个目标(在本例中是绘图容器)由一个特定的id标识。在本书中，您将总是发现myChart作为目标的标识符(，但是它可以采用任何名称，并且您必须始终记住，一个以上的目标可能被分配给同一个 web 页面。此外，指定目标的宽度和高度也很重要。这些将定义网页中绘图区域的大小(见清单 8-1)。
清单 8-1。ch8_01.html
<BODY>
...
<div id="myChart" style="height:400px; width:500px;"></div>
...
</BODY>
创造情节
要输入，jqPlot 命令和几乎所有的 JavaScript 代码都必须包含在一个<scripts>标签中。但是，一个网页分为两部分:头部和身体。那么，插入 JavaScript 代码的最佳位置是哪里呢？虽然可以将代码放在库的两个部分中，但是最好只放在一个部分中，这取决于库。考虑到 jqPlot 的工作方式，您将把代码放在<head></head>标记之间。
此外，jqPlot 是 jQuery 的扩展，所以如果你想让你的代码被执行，你需要在$(document).ready()函数中调用它的所有方法(见清单 8-2)。
清单 8-2。ch8_01.html
$(document).ready(function(){
// Insert all jqPlot code here.
});
然后，为了创建实际的绘图，您必须用您想要在其中绘制图表的目标的id调用$.jqplot插件。这个调用由下面的 jQuery 函数执行:
$.jqplot(``target, data, optionsT2】
jqplot()函数有三个参数；target，它是要在其中渲染绘图的目标元素的 ID—在绘图容器中指定的 ID 属性；数据，由数据序列数组组成；和选项，jqPlot 的主要特性。在选项中，您将输入必要的自定义设置，使您的图表更适合您的需求和口味。
如果没有定义任何选项(是的，是可选的！)，您可以按照标准选项的设置生成图表。事实上，已经定义了许多选项，没有必要在每次开发图表时都更改所有设置。如果标准选项符合您的要求，则不需要定义它们。这将为您节省大量时间，并避免编写多行代码。例如，让我们编写清单 8-3 中的函数。
清单 8-3。ch8_01.html
$(document).ready(function(){
$.jqplot ('myChart', [[100, 110, 140, 130, 80, 75, 120, 130, 100]]);
});
只需几行代码，您就可以生成如图 8-1 所示的图表。
图 8-1。
A line chart created with only a few lines of code
根据您刚才看到的内容，您可以推测，如果您不指定任何选项，默认的结果将是一个折线图，并且您添加的数据将被解释为折线图。因此，数组中的值是 y 值，它们序列的索引在 x 轴上报告。在后面的章节中，你将学习如何解释这些值，以及如何从线性图表中得到不同类型的图表。
使用 jqPlot 插件
最新的 jqPlot 发行版提供了大约 30 个插件(有关所有 jqPlot 插件的列表，请参见附录 B)。每一个都专门执行一个特定的任务，其名称通常表示功能。在接下来的章节中，您将会看到许多这样的插件——它们的用途和主要选项。
让我们以 BarRenderer 为例。如果您希望将输入数据解释为条形图，则此插件是必需的:
$.jqplot ('myChart', [[100, 110, 140, 130, 80, 75, 120, 130, 100]],
{
series:[{renderer: $.jqplot.BarRenderer}]
});
在 jqPlot 中，我们经常将插件称为渲染器。这是因为框架的架构指定每个插件必须覆盖一个特定的任务。如果开发人员认为有必要，那么他或她会包含它。此外，真正的渲染器应该尽可能地相互独立。事实上，您可以添加任意数量的插件，通常它们的顺序并不重要。有些插件不需要您指定任何额外的选项或设置；它们已经被定义，并且仅仅由于被包含而被直接激活。一个这样的插件是 Highlighter，它突出显示鼠标附近的数据点。但是，如果您对默认设置不满意，您总是可以用新值定义属性；这些插件还包含其他可设置的属性。其他插件提供的功能必须在 options 参数中指定才能被激活。
因此，jqPlot 库的基本元素和附加组件(由包含的插件逐渐引入)都可以通过一系列属性来表征(与 CSS 样式非常相似)。jqPlot 库调用这些属性选项。
了解 jqPlot 选项
有效使用 jqPlot 的关键是理解 jqPlot 的选项。图表中任何对象的属性都是由属性定义的，这些属性可以取不同的值。理解如何通过我将称为选项的对象类型来设置和使用这些属性是非常重要的。
插入选项
到目前为止，您已经看到了如何在 JavaScript 代码中调用jqPlot()函数，以及如何包含插件和数据，但是您还没有观察到如何输入选项。您可以通过向$.jqplot()函数传递不同的属性来自定义默认折线图，如下所示:
$(document).ready(function(){
$.jqplot ('myChart', [[100, 110, 140, 130, 80, 75, 120, 130, 100]],
{
//All the attributes here.
});
});
首先要注意的是，在调用$.jqplot()之后，不能直接在图表对象中设置属性。充其量，这不会做任何事情。您必须传递选项参数中的所有属性。
options 参数表示每个属性中的jqPlot对象。图表的所有特征都由许多属性表示，这些属性被设置为特定的值。这些值将条形图与折线图区分开，控制线条的笔划或轴的长度，指示是否显示图例以及在哪里显示，等等。通常，当包含各种插件时，没有必要指定所有属性的值；它们已经被设置为默认值。正是因为这些缺省值，在添加插件时，您无需添加一行代码就可以实现一个漂亮的图表。如果显式指定属性，实际上是覆盖了已经用默认值定义的属性的值。
因为我们的目标是设置jqPlot对象，并且因为它是由一系列组件组成的，所以有必要通过定义一系列对象及其属性来构建一个能够完美反映这些组件的options对象。调用与组件相对应的对象，并为其在options对象中的一个属性赋值，您将覆盖默认值并更改jqPlot对象的相应组件的属性。您可以在options对象中定义的最常用的对象有
seriesColorsstackSeriestitleaxesDefaultsaxesseriesDefaultsserieslegendgridcursorhighlighter
每个名称都反映了将受属性值更改影响的图表组件。这些对象是由一系列定义明确的属性构建的，每个属性都有自己的默认值。
这是jqPlot对象的结构:
jqplot 对象>组件对象>对象属性>默认值
在清单 8-4 中，你可以看到在定义选项对象时需要遵循的相应结构。
清单 8-4。ch8_02c.html
var options = {
axes:{
yaxis:{
min: 70,
max: 150
},
...
},
...
};
我认为最容易添加到图表中的对象是title。它不包含任何属性，通常被认为是jqPlot对象的属性本身。此外，可以直接在上面设置一个文本值，该文本将成为图表的标题。鉴于其简单性，title是理解如何使用选项的一个很好的起点(清单 8-5)。
清单 8-5。ch8_02a.html
$(document).ready(function(){
$.jqplot ('myChart', [[100, 110, 140, 130, 80, 75, 120, 130, 100]],
{
title: 'My first jqPlot chart'
});
});
如果你愿意，你也可以用jqplot()函数从外部定义对象的属性，将属性分配给一个变量。然后这个变量将作为一个参数在jqPlot()函数中传递，如清单 8-6 所示。这个变量实际上是options对象。
清单 8-6。ch8_02a.html
var options = { title: 'My first jqPlot chart' };
$.jqplot ('myChart', [[100, 110, 140, 130, 80, 75, 120, 130, 100]], options);
在这两种情况下，您现在都有一个顶部带有标题的图表(见图 8-2 )。
图 8-2。
Adding a title to a line chart
为了更好地理解如何在options对象中设置 jqPlot 属性，让我们举个例子，参考 jqPlot 网站的 API 文档部分( www.jqplot.com/docs/files/jqplot-core-js.html )。假设您想要隐藏图表中的网格线。在属于grid对象的属性列表中，您将找到您正在寻找的内容:
this.drawGridlines = true.
this是网格的实例，true是在创建jqplot对象时分配给它的默认值。因为您希望隐藏网格(这种行为不同于默认行为)，所以您需要在jqPlot对象中用值false替换值true。为此，您必须在options对象定义中添加drawGridlines属性，维护结构对象:{property:attribute}。
options = {grid:{drawGridlines: false}};
现在，你有了一个没有网格线的图表(见图 8-3 )。
图 8-3。
Hiding the grid lines in a line chart
关于可以设置的属性的完整列表，可以去 jqPlot 官方网站( www.jqplot.com/docs/index/General.html )或者阅读每个发行版中包含的jqPlotOptions.txt文件。
轴上的处理选项
轴的处理与其他普通组件对象略有不同，因为它们有四个不同的子对象，即xaxis、yaxis、x2axis和y2axis。为了说明轴，我们需要一个嵌套更深的例子。假设您想要指定 y 轴上的min和max属性。为此，你需要用清单 8-7 所示的结构指定options对象。
清单 8-7。ch8_02c.html
var options = {
axes:{
yaxis:{
min:70,
max:150
}
}
};
现在，y 轴上的范围在您在options中定义的max和min属性之间(参见图 8-4 )。
图 8-4。
A line chart focused on a specific range on the y axis
为了使事情变得更简单，jqPlot 提供了一个方便的快捷方式，使我们能够一次为所有轴的属性分配相同的值:对象axesDefaults。如果你想给 x 和 y(或者 x2 和 y2)设置相同的值，你只需要为axesDefaults选项对象指定这些属性，赋值一次(见清单 8-8)。
清单 8-8。ch8_02d.html
$(document).ready(function(){
var options = {
axesDefaults:{
min:0,
max:20
}
};
$.jqplot ('myChart', [[1,4,8,13,8,7,12,10,5]], options);
});
插入一系列数据
前面，您已经看到了如何使用标准选项的设置生成简单的折线图(参见“创建图”一节)。在这个例子中，数据数组作为函数$.jqplot()中的第二个参数被直接传递。但是，您也可以在外部将数据数组定义为变量，然后将其作为第二个参数传递。
$(document).ready(function(){
var data = [[100,110,140,130,80,75,120,130,100]];
$.jqplot ('myChart', data);
});
在这里，您可以找到与 y 轴上的值相对应的单个数据系列。但是，正如您将看到的，可以将数据作为(x，y)值对传递，也可以一次传递多个数据系列。这些输入模式各不相同，这取决于您正在设计的图表以及所使用的各种插件的要求。例如，如果你想输入多个数据序列，你需要声明四个不同的数组，如清单 8-9 所示。
清单 8-9。ch8_03a.html
$(document).ready(function(){
var series1 = [1, 2, 3, 2, 3, 4];
var series2 = [3, 4, 5, 6, 5, 7];
var series3 = [5, 6, 8, 9, 7, 9];
var series4 = [7, 8, 9, 11, 10, 11];
$.jqplot ('myChart', [series1, series2, series3, series4]);
});
jqPlot 能够管理多个系列，而无需在options中指定任何属性。事实上，浏览器会显示一个折线图，有多少条数据系列就有多少条线，每条线都有不同的颜色，如图 8-5 所示。
图 8-5。
A multiseries line chart with different colors for each series
正如您所看到的，除了使代码更加可读和整洁之外，外部定义的数据系列还可以帮助将来扩展和操作数据。使用 JavaScript 提供的所有工具，您可以创建、操作、排序、计算和计算各种各样的数据。
甚至对于一系列数据，也可以改变options对象的属性。这些序列按照特定的顺序被插入到一个数组中，该数组作为第二个参数在$.jqplot()函数中传递。这个顺序将反映在jqPlot对象中的series对象的创建中。例如，如果您只希望第二个系列不显示其标记点，则有必要为第一个系列的属性留出空间(不覆盖其属性)，然后在第二个空间中将showMarker属性设置为'false'。这样，jqPlot 将只覆盖第二个系列的属性值。为了实现这一点，你必须编写清单 8-10 所示的options对象。
清单 8-10。ch8_03b.html
$(document).ready(function(){
var series1 = [1, 2, 3, 2, 3, 4];
var series2 = [3, 4, 5, 6, 5, 7];
var series3 = [5, 6, 8, 9, 7, 9];
var series4 = [7, 8, 9, 11, 10, 11];
var options = {
series: [ {},
{
showMarker: false
}]
}
$.jqplot ('myChart', [series1, series2, series3, series4], options);
});
这些设置的结果就是图 8-6 中的四个系列的图表。请注意，从顶部开始的第三个系列没有标记点。
图 8-6。
A multiseries chart with a series showing no markers
如果你决定在axesDefaults中设置showMarker属性，而不是在axes对象中，你将一次为所有的序列分配相同的值(见清单 8-11)。
清单 8-11。ch8_03c.html
$(document).ready(function(){
var series1 = [1, 2, 3, 2, 3, 4];
var series2 = [3, 4, 5, 6, 5, 7];
var series3 = [5, 6, 8, 9, 7, 9];
var series4 = [7, 8, 9, 11, 10, 11];
var options = {
seriesDefaults: { showMarker: false }
};
$.jqplot ('myChart', [series1, series2, series3, series4], options);
});
现在，图表中没有一个系列显示任何标记点(见图 8-7 )。
图 8-7。
A multiseries chart with no markers
还有第三种方法将数据作为数组输入。您刚刚看到了这样一种情况，其中为每个系列定义了一个数组，然后传递给$.jqplot()函数，所有这些都聚集在一个数组中:
var series1 = [1, 2, 3, 2, 3, 4];
var series2 = [3, 4, 5, 6, 5, 7];
var series3 = [5, 6, 8, 9, 7, 9];
var series4 = [7, 8, 9, 11, 10, 11];
$.jqplot ('myChart', [series1, series2, series3, series4], options);
但是，也可以在一个变量中定义所有的序列，我们称之为dataSets:
var dataSets = {
data1: [[1,1], [2,2], [3,3], [4,2], [5,3], [6,4]],
data2: [[1,3], [2,4], [3,5], [4,6], [5,5], [6,7]],
data3: [[1,5], [2,6], [3,8], [4,9], [5,7], [6,9]],
data4: [[1,7], [2,8], [3,9], [4,11], [5,10], [6,11]]
};
一旦您声明了dataSets变量，为了访问这些值，您必须指定其中的序列，并以dataSets.作为前缀。因此，当你需要将这四个数列作为jqplot()函数的第二个参数单独传递时，你必须这样做:
$.jqplot ('myChart', [dataSets.data1, dataSets.data2, dataSets.data3, dataSets.data4], options);
虽然，目前，这整个操作可能看起来太费力了，但是稍后您将会看到，在特殊情况下，将所有数据收集到一个数据集中是非常有用的。
渲染器和插件:进一步说明
通常，渲染器是一个对象，它被附加到绘图中的某个对象上以便进行绘制。插件除了添加绘图功能外，还可以执行其他功能，如事件处理；进行计算；以及处理字符串和值的格式，比如日期。因此，可以将渲染器视为绘图插件，但反过来就不一定了。
让我们借助一些例子来更详细地考察这种细微的差别。例如，您已经看到，通过只输入一个数据系列，您可以默认获得一个折线图(参见“创建绘图”一节)。如果要将这个系列渲染成条形图，需要将 barRenderer 插件附加到options中的seriesDefaults对象上。此外，当从折线图切换到条形图时，有必要在 x 轴上创建类别，以便使条形相互之间很好地分开。为此，你需要在options中将CategoryAxisRenderer附加到axes对象上(见清单 8-12)。
清单 8-12。ch8_04a.html
$(document).ready(function(){
var data = [[100, 110, 140, 130, 80, 75, 120, 130, 100]];
var options = {
seriesDefaults: {
renderer: $.jqplot.BarRenderer
},
axes:{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer
}
}
}
$.jqplot ('myChart', data, options);
});
但是，调用options中的两个渲染器是不够的。您还必须在页面中加载它们，因此您必须包含相应的插件，如清单 8-13 和 8-14 所示(CDN 服务)。
清单 8-13。ch8_04a.html
<script type="text/javascript" src="../src/jquery.min.js"></script>
<script type="text/javascript" src="../src/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.min.css" />
<script type="text/javascript" src="../src/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.min.js"></script>
清单 8-14。ch8_04a.html
<script src="http://code.jquery.com/jquery-1.9.1.min.jsT2】
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.jsT2】
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.cssT2】
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.barRenderer.min.jsT2】
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.jsT2】
如果在浏览器中重新加载页面，折线图就变成了条形图，如图 8-8 所示。
图 8-8。
A bar chart
通过调用这两个渲染器到options，您可以用这些类别渲染器替换对绘图中所有系列有效的默认渲染器。后者又有几个设置为默认值的属性，这些属性也可以修改。这些属性中有许多可能是特定于该特定渲染器的，因此它们将被添加到那些已经在jqplot对象中定义的属性中，以便为绘图引入新的功能。
即使对于这类附加属性，您也可以通过options对象来更改默认值。首先，将所需的渲染器分配给renderer属性。然后，在rendererOptions属性中指定您想要设置的所有属性。所有这些属性都将在您想要操作的组件对象中指定。例如，如果你想让一个给定系列的每一条都有不同的颜色，你需要改变属性varyBarColor，用true替换默认值false(见清单 8-15)。
清单 8-15。ch8_04b.html
var options = {
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: true
}
},
axes:{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer
}
}
}
根据您刚才所做的更改，BarRenderer 插件将自动为每个条分配不同的颜色(参见图 8-9 )。
图 8-9。
A bar chart with different colors
插件也有特定的属性，可以在options对象中设置。如前所述，并非所有的 jqPlot 插件都是渲染器，那些不是的插件在 jqPlot 发行版中很容易识别，因为它们的文件名中不包含术语渲染器。这些插件执行与图中特定类型的组件不直接相关的特定功能。这些特性总体上增强了 jqPlot 的功能。例如，Highlighter 是一个插件，当鼠标经过数据点时，它会高亮显示这些数据点。正如您将看到的，这个插件中有一系列工具可以处理数据值的格式说明符，并且可以用 HTML 结构显示工具提示内容。其他值得注意的插件包括 Trendline，它自动计算并绘制绘制数据的趋势线；光标，代表光标，显示在图中；和 PointLabels，它在数据点放置标签。
CSS 定制
jqPlot 图表的大部分样式是通过 CSS 完成的。jquery.jqplot.css文件在每个发行版中都可以获得，它是为了获得 jqPlot 图表而包含在您的 web 页面中的三个基本文件之一。
组成图表的所有组件都可以通过 CSS 定制，而不必在options对象中设置它们的任何属性。这是为了保持与网页中所有其他对象的一致性:图表的样式以及其中的所有内容(在画布内部)必须由 CSS 文件管理，就像任何其他 HTML 对象一样。控制 jqPlot 对象样式的 CSS 类的名称以前缀.jqplot-*开始。例如，影响所有轴的样式类是.jqplot-axis。
为了说明如何使用 CSS 修改图表的某些元素，让我们看看如何更改图表标题的字体和字体大小。与任何 HTML 元素一样，您只需调用jqPlot元素的 CSS 选择器并修改属性。因此，在这种情况下，您在清单 8-16 中添加 CSS 样式设置。
清单 8-16。ch8_02e.html
<style>
.jqplot-title {
font:italic bold 22px arial,sans-serif;
}
</style>
有了这个新的 CSS 语句，你就改变了标题的风格，如图 8-10 所示。
图 8-10。
Two different CSS styles applied to the title
模块思维
当事情变得越来越复杂，要添加到网站的代码变得很多时，最好从模块的角度来考虑。除了提供更好的可视性和易于维护之外，创建单独的模块还可以促进您刚刚创建的内容的可重用性。让我们分析一下清单 8-17 中你的网页的现状。
清单 8-17。ch8_05a.html
<HTML>
<HEAD>
<TITLE>My first chart</TITLE>
<script type="text/javascript" src="../src/jquery.min.js"></script>
<script type="text/javascript" src="../src/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.min.css" />
<style>
.jqplot-title {
font: italic bold 22px arial,sans-serif;
}
</style>
<script class="code" type="text/javascript">
$(document).ready(function(){
var data = [[100, 110, 140, 130, 80, 75, 120, 130, 100]];
$(document).ready(function(){
$.jqplot ('myChart', data,
{
title: 'My first jqPlot chart'
});
});
});
</script>
</HEAD>
<BODY>
<div id="myChart" style="height:400px; width:500px;"></div>
</BODY>
</HTML>
如果您在浏览器中加载该网页，您将获得图 8-11 中的折线图。
图 8-11。
A simple line chart
显而易见，控制页面样式的部分包含在标签对
版权属于：月萌API www.moonapi.com，转载请注明出处
