zsharedcode - JQueryElementPlotDoc.wiki

summary Plot 完全参考

http://www.microsofttranslator.com/bv.aspx?from=&to=en&a=http://code.google.com/p/zsharedcode/wiki/JQueryElementPlotDoc'>Translate this page

简介/目录

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

视频演示: www.tudou.com/programs/view/mkuQaMpuBvE/

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

准备
设置数据
- 数据序列
- DataSetting
- AppendData 方法
- Data 属性
显示数据
播放动画
数据排序
轴和网格
标题图例和序列
光标位置和放大图表
高亮显示数据
(这里是没有完成的章节)

准备

请确保已经在下载资源中的 JQueryElement.dll 下载一节下载 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 的脚本和样式, 在下载资源的 JQueryElement.dll 下载一节下载的压缩包中包含了一个自定义样式的 jQueryUI 和 jqplot, 如果需要更多样式, 可以在 jqueryui.com/download 下载:

<link type="text/css" rel="stylesheet" href="[样式路径]/jquery-ui-<version>.custom.css" />


<link type="text/css" rel="stylesheet" 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="[脚本路径]/excanvas.min.js"></script>


<script type="text/javascript" src="[脚本路径]/jquery.jqplot.min.js"></script>

也可以使用 ResourceLoader 来添加所需的脚本或样式, 详细请参考自动添加脚本和样式.

设置数据

数据序列 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 变量, 具体可以参考 JQueryElement 基本属性参考.

播放动画

设置 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 中不会.

轴和网格

通常轴就是指 x 和 y 轴, 网格也就是绘制数据的地方, 更多的内容请参考 Plot 轴和网格.

标题图例和序列

标题将显示在图表的上方, 图例可以说明每个序列的含义, 更多的内容请参考 Plot 标题图例和序列.

光标位置和放大图表

jqplot 中可以显示光标的位置, 也可以放大某个区域, 更多的内容请参考 Plot 光标位置和放大图表.

高亮显示数据

通过设置 HighlighterSetting 属性就可以让数据高亮显示, 更多的内容请参考 Plot 高亮显示数据.

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

更多内容, 敬请期待...

修订历史

2012-1-12: 增加脚本 excanvas.min.js 的引用, 增加轴和网格介绍.

2012-1-18: 增加标题图例和序列的介绍.

2012-1-26: 增加关于 ResourceLoader 的链接.

2012-1-31: 增加光标的介绍.

2012-2-2: 增加高亮的介绍.

Code

Archive