jQuery插件jqPlot介绍

原创于 2019-06-27 17:16:45 发布 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

jqPlot是一款基于jQuery的客户端JavaScript图表库，适用于网页中的图表生成。它提供了丰富的自定义选项和插件，如日志轴插件和条形图渲染器，以适应各种数据可视化需求。

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：

<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中。以下是如何包含日志轴插件：

这是相同的$ .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之后包含插件：

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