经过半个月的煎熬, 终于将是做好了 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/, 建议全屏观看.