如何设置 jqplot 图表插件所需的数据和几个属性介绍

经过半个月的煎熬, 终于将是做好了 jqplot 服务器端控件的雏形, 大家先睹为快吧.

请到 Download 下载资源的 JQueryElement 示例下载一节下载示例代码, 目录 /plot/Default.aspx.

由于精力有限, 不能在多个博客中保证文章的同步, 可在如下地址查看最新内容, 请谅解:

http://code.google.com/p/zsharedcode/wiki/JQueryElementPlotDoc

本文将初步的讲解如何设置 Plot 控件所使用的数据以及控件的部分属性, 目录如下:

* 准备

* 设置数据

* 数据序列

* DataSetting

* AppendData 方法

* Data 属性

* 显示数据

* 播放动画

* 数据排序

* (这里是没有完成的章节)

准备

请确保已经在 Download 下载资源中下载 JQueryElement 最新的版本.

请使用指令引用如下的命名空间:

<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement"
    Namespace="zoyobar.shared.panzer.ui.jqueryui.plusin.jqplot"
    TagPrefix="je" %>
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement"
    Namespace="zoyobar.shared.panzer.web.jqueryui.plusin.jqplot"
    TagPrefix="je" %>
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement"
    Namespace="zoyobar.shared.panzer.web.jqueryui"
    TagPrefix="je" %>

除了命名空间, 还需要引用 jQueryUI 和 jqplot 的脚本和样式, 在 Download 下载资源的 JQueryElement.dll 下载一节下载的压缩包中包含了一个自定义样式的 jQueryUI 和 jqplot, 如果需要更多样式, 可以在 http://jqueryui.com/download 下载:

<link type="text/css" rel="stylesheet" href="[样式路径]/jquery-ui-<version>.custom.css" />
<link rel="stylesheet" type="text/css" href="[样式路径]/jquery.jqplot.min.css" />
<script type="text/javascript" src="[脚本路径]/jquery-<version>.min.js"></script>
<script type="text/javascript" src="[脚本路径]/jquery-ui-<version>.custom.min.js"></script>
<script type="text/javascript" src="[脚本路径]/jquery.jqplot.min.js"></script>

设置数据

数据序列

Plot 可以显示多组数据, 比如, 同时显示两本图书各自的月销量, 每一本书相关的数据就是一个数据序列.

DataSetting

通过 Plot 的 DataSetting, 可以添加数据:

<je:Plot ID="plot2" runat="server" IsVariable="true" Width="500px">
    <DataSetting>
        <je:Data>
            <je:Point Param1="1" Param2="2" />
            <je:Point Param1="2" Param2="4" />
            <je:Point Param1="3" Param2="8" />
            <je:Point Param1="4" Param2="16" />
        </je:Data>
        <je:Data>
            <je:Point Param1="1" Param2="3" />
            <je:Point Param1="2" Param2="7" />
            <je:Point Param1="3" Param2="10" />
            <je:Point Param1="4" Param2="6" />
        </je:Data>
    </DataSetting>
</je:Plot>

上面的代码中, 添加了 2 个序列, 每一个 Data 对象对应了一个序列. 通过添加 Point, 可以为序列增加点, Param1 属性对应点的第一个参数, 通常也就是 x 坐标, Param2 属性对应了第二个参数, 通常是 y 坐标. 在某些特殊情况下, 还会用到 Param3 和 Param4.

AppendData 方法

在后台代码中, 可以通过 AppendData方法来添加数据序列:

protected void Page_Load ( object sender, EventArgs e )
{
    this.plot3.AppendData (
        new Data (
            new Point ( 1, 1 ),
            new Point ( 2, 2 ),
            new Point ( 3, 3 )
            ),
        new Data (
            new Point ( 1, 3 ),
            new Point ( 2, 2 ),
            new Point ( 3, 1 )
            )
        );
}

在页面载入时, 为 plot3 添加了 2 个序列, 和 DataSetting 的结构类似, Data 对象表示一个序列, 而 Point 对象表示点.

Data 属性

此外可以通过 Plot 的 Data属性来设置序列:

<je:Plot ID="plot6" runat="server" IsVariable="true"
    Data="[[[2,5],[4,6]],[[2,6],[4,7]]]">
</je:Plot>

Data 属性的格式为 [<序列, 比如: [<点, 比如: [x, y]>]>].

显示数据

有了数据之后, 可以通过 fill 方法在 plot中显示数据:

<script type="text/javascript">
    $(function () {
        plot1.__plot('fill');
    });
</script>

上面的代码中, 在页面载入完成后, 显示数据. 其中 plot1 是通过 Plot 的 IsVariable 属性生成的 javascript 变量, 具体可以参考 http://code.google.com/p/zsharedcode/wiki/JEBase.

播放动画

设置 Plot 的 Animate属性为 true, 则在显示数据时将播放动画:

<span class="span-button" onclick="plot8.__plot('fill');">播放动画</span>
<je:Plot ID="plot8" runat="server" IsVariable="true"
    Data="[[[1,1],[3,5],[2,6],[4,7]]]"
    Animate="true">
</je:Plot>

数据排序

在默认的情况下, plot 会对数据进行排序, 可以将 SortData属性设置为 false 来阻止排序, 比如:

<je:Plot ID="plot7" runat="server" IsVariable="true"
    Data="[[[1,1],[3,5],[2,6],[4,7]]]"
    SortData="false">
</je:Plot>

<je:Plot ID="plot8" runat="server" IsVariable="true"
    Data="[[[1,1],[3,5],[2,6],[4,7]]]">
</je:Plot>

在 plot7 中, 第 2 个点 [3,5] 和第 3 个点 [2,6] 会交换顺序, 而在 plot8 中不会.

JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.

实际过程演示: http://www.tudou.com/programs/view/mkuQaMpuBvE/, 建议全屏观看.