强大的Jquery图形报表绘制插件 —— jqPlot

 
Js/Css/jQuery

jqPlot是一款基于jquery类库的图标绘制插件。通过jqPlot可以再网页中绘制线状、柱状、饼状等多种样式图表。而且，jqPlot具有插件可扩展性(Pluggability)，你可以编写自己的图表样式。jqPlot在之前有人介绍过了，这里我主要介绍它的一些用法和示例。

在jqPlot主页的自我介绍中有这样一句话：“jqPlot is a plotting plugin for the jQuery Javascript framework.”。这里我并不认同他所说的jquery是一个javascript框架，jquery只能说是一个javascript库（javascript library），相信在jquery主页也找不到javascript framework的字眼。

 

jqPlot功能简介:

  1. 有多种图表样式可供选择
  2. 可以自定义日期轴线
  3. 可设置旋转轴文字
  4. 自动计算趋势线
  5. 工具条提示和高亮数据点
  6. 默认最优设置，非常易于使用

以上功能在jqPlot主页中的示例页面有很多直观的展示。这里是它详细使用文档。

使用方法及示例：

  1. 下载jqPlot压缩包后（目前是0.70版本），可以看到以下主要文件：jquery-1.3.2.js，jquery1.3.2类库文件；jquery.jqplot.js，功能主文件；jquery.jqplot.css，图表样式文件；excanvas.js，针对ie浏览器的修正文件；test*.html，一些示例文件；plugins文件夹中放置jqplot的各种图表插件。

    最简单的，可在中做如下引用：

    <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]--><script language="javascript" type="text/javascript" src="jquery-1.3.2.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" />
  2. 在页面中定义一个div用于放置图表，在div中声明id及高度和宽度，如： 
    <div id="chartdiv" style="height:400px;width:300px; "></div>
  3. 创建一个最简单的x轴、y轴趋势线（使用默认设置及默认样式）： 
    $.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);

    其中chartdiv为预定义的div的id，第二个参数是图表数据，例如[1,2]用来表示图表中x轴为1，y轴为2的一个点。示例效果（ 示例由jqPlot真实生成，非图片）：

    0.0
    2.4
    4.8
    7.2
    9.6
    12.0
    -19.8
    32.5
    84.8
    137.1
    189.4
    241.7

  4. 配置主要参数，创建自定义x轴、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:{min:-10, max:240}},          //准确控制y轴最大值及最小值  series:[{color:'#5FAB78'}]                    //定义趋势线颜色});

    Exponential Line
    0.0
    2.4
    4.8
    7.2
    9.6
    12.0
    -10.0
    40.0
    90.0
    140.0
    190.0
    240.0

  5. 通过引用jqplot插件绘制柱状图，并设置更多参数：

    引用插件：

    <script language="javascript" type="text/javascript" src="./plugins/jqplot.categoryAxisRenderer.js"></script><script language="javascript" type="text/javascript" src="./plugins/jqplot.barRenderer.js"></script>

    生成图表：

        line1 = [4, 2, 9, 16];           //子统计1数据    line2 = [3, 7, 6.25, 3.125];  //子统计2数据    plot1 = $.jqplot('chart3', [line1, line2], {        stackSeries: true,  //子统计数据叠加显示        legend: {show: true, location: 'nw'},        title: 'Unit Sales: Acme Explosive Division',  //标题        seriesDefaults: {        renderer: $.jqplot.BarRenderer,  //使用柱状图表示        rendererOptions: {            // barPadding: -15,            barMargin: 30   //柱状体间隔        }},            series: [{label: '1st Qtr'}, {label: '2nd Qtr'}],  //提示工具栏        axes: {            xaxis: {                renderer: $.jqplot.CategoryAxisRenderer  //x轴绘制方式            },            yaxis: {min: 0, max: 20, numberTicks:5}    //y轴最大值最小值及间隔值        }    });

    Unit Sales: Acme Explosive Division
    1
    2
    3
    4
    0.0
    5.0
    10.0
    15.0
    20.0
    		 1st Qtr
    		2nd Qtr

上面展示的三个示例是jqPlot众多用法中最简单的几个，但想必已经可以感受到它强大易用的优点。更多的使用方法参考jqPlot主页提供的参考文档。使用时遇到问题也可以在下面提出，一起探讨。

有话要说