jQuery插件jqPlot介绍

javascript图表库jqPlot介绍
jqPlot是一个jQuery插件，用于在您的网页中生成纯客户端javascript图表。

jqPlot主页位于http://www.jqplot.com/。

项目页面和下载位于http://www.github.com/jqPlot/jqPlot/。

以下是一些演示jqPlot用法的示例。这些图显示为静态图像。在这里的测试和示例页面上可以看到更多动态渲染图的示例：../../ tests /。

包括文件
jqPlot需要jQuery（某些功能需要1.4+）。jQuery包含在发行版中。使用jqPlot包括jquery，jqPlot jQuery插件，jqPlot css文件以及可选的网页IE支持的excanvas脚本。注意，仅在9以下的IE版本中需要excanvas。IE 9包含对canvas元素的本机支持，并且不需要excanvas：

<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />

添加一个绘图容器
将容器（目标）添加到您希望绘图显示的网页。一定要给你的目标一个宽度和一个高度：

<div id="chartdiv" style="height:400px;width:300px; "></div>
创建一个图表
然后，通过调用带有目标ID和一些数据的$ .jqplot插件来创建实际绘图：

$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
这将产生如下图表：

图表选项
您可以通过将选项传递给$ .jqplot函数来自定义绘图。jqPlotOptions.txt文件中的jqPlot选项中描述了选项。选项用法的示例：

$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
{ title:'Exponential Line',
  axes:{yaxis:{min:-10, max:240}},
  series:[{color:'#5FAB78'}]
});
这将产生如下图表：

使用插件
你可以使用jqPlot插件（即插件到jqPlot插件），在你包含jqPlot插件后将它们包含在你的html中。以下是如何包含日志轴插件：

<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.logAxisRenderer.js"></script>
重要说明：对于jqplot build r529及更高版本（0.9.7r529及更高版本），您必须通过绘图的{show：true}插件选项或使用$ .jqplot.config.enablePlugins = true显式启用插件; 在创建绘图之前在页面上设置的配置选项。只有在加载时可以立即激活的插件才会受到影响。这包括非渲染器插件，如光标，可拖动，荧光笔和趋势线。

这是相同的$ .jqplot调用但具有log y轴：

$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
{ title:'Exponential Line',
  axes:{yaxis:{renderer: $.jqplot.LogAxisRenderer}},
  series:[{color:'#5FAB78'}]
});
产生如下图表：

您可以使用特定于日志轴插件的选项进一步自定义：

$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
{ title:'Exponential Line',
  axes:{yaxis:{renderer: $.jqplot.LogAxisRenderer, tickDistribution:'power'}},
  series:[{color:'#5FAB78'}]
});
这使得图表如下：

有关选项的完整列表，请参阅jqPlotOptions.txt文件中的jqPlot 选项。

您可以根据需要添加任意数量的插件。订单通常并不重要。一些插件，如突出显示鼠标附近数据点的荧光笔插件，不需要任何额外的选项或设置来运行。荧光笔确实具有用户可以设置的其他选项。

其他插件，例如barRenderer，提供必须在图表选项对象中指定的功能。要使用条形图渲染器将系列渲染为条形图，您首先应在jqPlot之后包含插件：

<script language="javascript" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
然后你会创建一个图表，如：

$.jqplot('chartdiv',  [[34.53, 56.32, 25.1, 18.6]], {series:[{renderer:$.jqplot.BarRenderer}]});
此处，默认的LineRenderer被BarRenderer替换，以生成第一个（也是唯一的）系列的条形图。