使用jqPlot绘制统计图-1

原文地址: https://blog.cndenis.com/web/2013/11/使用jqPlot绘制统计图-1.html

要在网页上显示统计图, 可以在服务器生成图片后发给浏览器, 也可以把数据发给浏览器, 用JavaScript画. jqPlot是后者的一种, 它是jQuery的一个插件, 是完全运行于客户端的绘图包. 下面简介一下它的使用.

引用库文件

jqPlot 是 jQuery 插件, 需要在网页上引用 jQuery 和 jqPlot 包中的以下的几个文件.

要注意这几个只是最基本的, 要做出各种图形效果的话, 需要另外再引用其他的一些文件, 后面会分别介绍.

<!--[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:250px;width:500px; "></div>

画图

以下是做一个最简单的图的例子:

$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);

画出来的图是这样的:

$.jqplot 是用来作图的, 它的形式是

$.jqplot(容器ID, 数据, 参数)

要注意其中的容器ID并不是 jQuery 的选择器, 不带#号.

数据是以一个二元组为一个点, 如[1, 2], 以若干个点的列表作为一个系列 (也就是一条曲线), 数据可以包含多个系列, 于是你就会看到是三层的列表([[[)

参数是一个JSON对像, jqPlot的所有应用技巧就都装在里面了.

下面是一个具有多条曲线, 并且设定标题的图:

$.jqplot('chartdiv2',[
    [[1, 2],[2,4],[3,7],[4,15],[5,20],[6,16]],
    [[1, 3],[2,6],[3,9],[4,12],[5,5],[6,2]],
    [[1, 2],[2,4],[3,2],[4,7],[5,3],[6,5]]
], {title:'这是三条曲线'});

原文地址: https://blog.cndenis.com/web/2013/11/使用jqPlot绘制统计图-1.html