jQuery插件jqPlot介绍

迷南。 2023-10-18 20:38 49阅读 0赞

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替换，以生成第一个（也是唯一的）系列的条形图。