如何设置 jqplot 图表插件的轴和网格
春节即将到来, 这是节前的最后一篇, 来说明下 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/, 建议全屏观看.
