如果通过修养达不到提高鉴赏力的目的，修养两字也就毫无意义了。——波伊斯（上海网站建设）
如何设置 jqplot 图表插件的轴和网格
Admin
2012年1月19日
春节即将到来， 这是节前的最后一篇， 来申明下 jqplot 的轴和网格的设置.
请到 Download 下载资料 的 JQueryElement 示例下载一节下载示例代码， 目次 /plot/Default.aspx.
本文将具体的讲解如何设置 Plot 图表控件的轴和网格， 目次如下:
* 筹办
* 轴
* 题目
* 刻度
* 两边的空白
* 边框
* X2， Y2
* 默认设置
* 网格
* 样式
* 暗影
* （这里是没有完成的章节）
筹办
请先查看 http://code.google.com/p/zsharedcode/wiki/JQueryElementPlotDoc 或者筹办一节的内容.
轴
题目
经由过程 Title属性可以设置轴的题目:
<je:Plot ID="plot1" runat="server" IsVariable="true" Width="500px">
<AxesSetting>
<XAxisSetting
Label=""这里是 <span style="font-size: xx-large">x</span> 轴"">
</XAxisSetting>
</AxesSetting>
<DataSetting>
<je:Data>
<je:Point Param1="10" Param2="1" />
<je:Point Param1="11" Param2="10" />
<je:Point Param1="13" Param2="22" />
<je:Point Param1="20" Param2="30" />
</je:Data>
</DataSetting>
</je:Plot>
若是欲望题目中的 html 代码作为文字显示， 则须要设置 EscapeHtml属性为 true:
<je:Plot ID="plot2" runat="server" IsVariable="true" Data="[[[1，1]，[2，2]]]" Width="500px">
<AxesSetting
YAxisSetting-Label=""这里是 <b>y</b> 轴""
YAxisSetting-LabelRendererSetting-EscapeHtml="true">
</AxesSetting>
</je:Plot>
刻度
经由过程 NumberTicks 和 TickInterval属性可以设置刻度之间的间隔:
<je:Plot ID="plot3" runat="server" IsVariable="true"
Data="[[[1，1]，[2，2]，[3，3]，[4，4]，[5，5]，[6，6]，[7，7]]]">
<AxesSetting>
<XAxisSetting NumberTicks="4" TickInterval="3">
</XAxisSetting>
</AxesSetting>
</je:Plot>
而经由过程 Ticks属性可以设置在哪些地位显示刻度:
<je:Plot ID="plot8" runat="server" IsVariable="true"
Data="[[[0，1]，[2，5]，[3，7]]]">
<AxesSetting>
<XAxisSetting Ticks="[0，1，3，5，10]">
</XAxisSetting>
</AxesSetting>
</je:Plot>
上方的代码中， 将在 0， 1， 3， 5， 10 显示刻度.
还可以设置刻度的色彩和文本的格局:
<je:Plot ID="plot11" runat="server" IsVariable="true"
Data="[[[100，1]，[200，101]，[20，50]]]">
<AxesSetting>
<XAxisSetting>
<TickRendererSetting TextColor="Red"
Prefix="-" FormatString="（％d）" />
</XAxisSetting>
</AxesSetting>
</je:Plot>
经由过程 Min 和 Max可以设置刻度的最小值和最大值:
<je:Plot ID="plot6" runat="server" IsVariable="true"
Data="[[[2，5]，[4，2]，[3，7]]]">
<AxesSetting>
<XAxisSetting Min="0" Max="10">
</XAxisSetting>
</AxesSetting>
</je:Plot>
此外， 还可以设置刻度的样式和长度:
<je:Plot ID="plot10" runat="server" IsVariable="true"
Data="[[[-1，1]，[2，10]，[20，50]]]">
<AxesSetting>
<XAxisSetting>
<TickRendererSetting Mark="outside" MarkSize="20" />
</XAxisSetting>
</AxesSetting>
</je:Plot>
两边的空白
经由过程 Pad， PadMax 和 PadMin可以设置空白的比例:
<je:Plot ID="plot4" runat="server" IsVariable="true"
Data="[[[2，1]，[2，2]，[3，7]]]">
<AxesSetting>
<XAxisSetting Pad="2">
</XAxisSetting>
</AxesSetting>
</je:Plot>
<je:Plot ID="plot5" runat="server" IsVariable="true"
Data="[[[2，1]，[2，2]，[3，7]]]">
<AxesSetting>
<XAxisSetting PadMax="2">
</XAxisSetting>
</AxesSetting>
</je:Plot>
边框
经由过程 BorderColor 和 BorderWidth属性可以设置边框的样式:
<je:Plot ID="plot9" runat="server" IsVariable="true"
Data="[[[-10，1]，[20，10]，[20，20]]]">
<AxesSetting
XAxisSetting-BorderColor="Blue"
XAxisSetting-BorderWidth="3">
</AxesSetting>
</je:Plot>
X2， Y2
除了 x 和 y 轴， 图表中还有 x2 和 y2 轴:
<je:Plot ID="plot12" runat="server" IsVariable="true"
Data="[[[0，1]，[2，4]，[5，7]]]">
<AxesSetting
X2AxisSetting-BorderWidth="3"
X2AxisSetting-BorderColor="Blue">
</AxesSetting>
</je:Plot>
上方的代码设置了 x2 轴的色彩和宽度.
默认设置
可认为 x， y， x2， y2 这些轴设置默认的参数:
<je:Plot ID="plot13" runat="server" IsVariable="true"
Data="[[[0，1]，[2，4]，[5，7]]]">
<AxesDefaultsSetting
BorderColor="Red"
NumberTicks="3">
</AxesDefaultsSetting>
</je:Plot>
网格
样式
可设置直线的色彩和宽度等:
<je:Plot ID="plot2" runat="server" IsVariable="true"
Data="[[[0，0]，[1，4]，[2，4]]]">
<GridSetting
Background="DarkGray"
BorderColor="Red" BorderWidth="5"
GridLineColor="Blue" GridLineWidth="2" />
</je:Plot>
暗影
关于暗影的设置参数也很多:
<je:Plot ID="plot3" runat="server" IsVariable="true"
Data="[[[1，10]，[12，43]，[22，4]]]">
<GridSetting
ShadowDepth="5" ShadowWidth="6"
ShadowAngle="60" ShadowOffset="2" />
</je:Plot>
JQueryElement 是开源共享的代码， 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
实际过程演示: http://www.tudou.com/programs/view/HZC250BM_TE/， 建议全屏观察迟疑. 迎接接见 panzer 开源项目， http://zsharedcode.googlecode.com/ ， 此中包含了 IEBrowser 把握 WebBrowser 履行各类 js 和 jQuery 脚本以及录制功能 和 jQueryUI 的 Asp.net 控件 JQueryElement， 微博: http://t.qq.com/zoyobar
|