如何设置 jqplot 图表插件的轴和网格
2012-01-19 11:25
363 查看
[b]春[/b]节即将到来, 这是节前的最后一篇, 来说明下 jqplot 的轴和网格的设置.
请到 Download 下载资源 的 JQueryElement 示例下载一节下载示例代码, 目录 /plot/Default.aspx.
本文将详细的讲解如何设置 Plot 图表控件的轴和网格, 目录如下:
* 准备
* 轴
* 标题
* 刻度
* 两边的空白
* 边框
* X2, Y2
* 默认设置
* 网格
* 样式
* 阴影
* (这里是没有完成的章节)
[b]准备[/b]
请先查看 http://code.google.com/p/zsharedcode/wiki/JQueryElementPlotDoc 或者准备一节的内容.
[b]轴[/b]
标题
通过 Title属性可以设置轴的标题:
![](http://pic002.cnblogs.com/images/2012/273838/2012011910445055.jpg)
如果希望标题中的 html 代码作为文字显示, 则需要设置 EscapeHtml属性为 true:
![](http://pic002.cnblogs.com/images/2012/273838/2012011910455925.jpg)
刻度
通过 NumberTicks 和 TickInterval属性可以设置刻度之间的距离:
![](http://pic002.cnblogs.com/images/2012/273838/2012011910580297.jpg)
而通过 Ticks属性可以设置在哪些位置显示刻度:
上面的代码中, 将在 0, 1, 3, 5, 10 显示刻度.
![](http://pic002.cnblogs.com/images/2012/273838/2012011910584263.jpg)
还可以设置刻度的颜色和文本的格式:
![](http://pic002.cnblogs.com/images/2012/273838/2012011910592337.jpg)
通过 Min 和 Max可以设置刻度的最小值和最大值:
![](http://pic002.cnblogs.com/images/2012/273838/2012011910595825.jpg)
此外, 还可以设置刻度的样式和长度:
![](http://pic002.cnblogs.com/images/2012/273838/2012011911003853.jpg)
两边的空白
通过 Pad, PadMax 和 PadMin可以设置空白的比例:
![](http://pic002.cnblogs.com/images/2012/273838/2012011911013176.jpg)
![](http://pic002.cnblogs.com/images/2012/273838/2012011911014547.jpg)
边框
通过 BorderColor 和 BorderWidth属性可以设置边框的样式:
X2, Y2
除了 x 和 y 轴, 图表中还有 x2 和 y2 轴:
上面的代码设置了 x2 轴的颜色和宽度.
![](http://pic002.cnblogs.com/images/2012/273838/2012011911033834.jpg)
默认设置
可以为 x, y, x2, y2 这些轴设置默认的参数:
![](http://pic002.cnblogs.com/images/2012/273838/2012011911042236.jpg)
[b]网格[/b]
![](http://pic002.cnblogs.com/images/2012/273838/2012011911190024.jpg)
样式
可设置直线的颜色和宽度等:
![](http://pic002.cnblogs.com/images/2012/273838/2012011911202761.jpg)
阴影
关于阴影的设置参数也很多:
![](http://pic002.cnblogs.com/images/2012/273838/2012011911211463.jpg)
JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
实际过程演示: http://www.tudou.com/programs/view/HZC250BM_TE/, 建议全屏观看.
请到 Download 下载资源 的 JQueryElement 示例下载一节下载示例代码, 目录 /plot/Default.aspx.
本文将详细的讲解如何设置 Plot 图表控件的轴和网格, 目录如下:
* 准备
* 轴
* 标题
* 刻度
* 两边的空白
* 边框
* X2, Y2
* 默认设置
* 网格
* 样式
* 阴影
* (这里是没有完成的章节)
[b]准备[/b]
请先查看 http://code.google.com/p/zsharedcode/wiki/JQueryElementPlotDoc 或者准备一节的内容.
[b]轴[/b]
标题
通过 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>
![](http://pic002.cnblogs.com/images/2012/273838/2012011910445055.jpg)
如果希望标题中的 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>
![](http://pic002.cnblogs.com/images/2012/273838/2012011910455925.jpg)
刻度
通过 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>
![](http://pic002.cnblogs.com/images/2012/273838/2012011910580297.jpg)
而通过 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 显示刻度.
![](http://pic002.cnblogs.com/images/2012/273838/2012011910584263.jpg)
还可以设置刻度的颜色和文本的格式:
<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>
![](http://pic002.cnblogs.com/images/2012/273838/2012011910592337.jpg)
通过 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>
![](http://pic002.cnblogs.com/images/2012/273838/2012011910595825.jpg)
此外, 还可以设置刻度的样式和长度:
<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>
![](http://pic002.cnblogs.com/images/2012/273838/2012011911003853.jpg)
两边的空白
通过 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>
![](http://pic002.cnblogs.com/images/2012/273838/2012011911013176.jpg)
![](http://pic002.cnblogs.com/images/2012/273838/2012011911014547.jpg)
边框
通过 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 轴的颜色和宽度.
![](http://pic002.cnblogs.com/images/2012/273838/2012011911033834.jpg)
默认设置
可以为 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>
![](http://pic002.cnblogs.com/images/2012/273838/2012011911042236.jpg)
[b]网格[/b]
![](http://pic002.cnblogs.com/images/2012/273838/2012011911190024.jpg)
样式
可设置直线的颜色和宽度等:
<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>
![](http://pic002.cnblogs.com/images/2012/273838/2012011911202761.jpg)
阴影
关于阴影的设置参数也很多:
<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>
![](http://pic002.cnblogs.com/images/2012/273838/2012011911211463.jpg)
JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
实际过程演示: http://www.tudou.com/programs/view/HZC250BM_TE/, 建议全屏观看.
相关文章推荐
- 如何设置 jqplot 图表插件所需的数据和几个属性介绍
- 如何设置 jqplot 图表插件的标题图例和直线
- 如何在 CentOS 6.4为 Firefox 设置 x86_64 的插件
- Flex中如何通过设置GridLines对象的horizontalAlternateFill样式交错显示LineSeries图表背景颜色的例子
- highcharts图表组件如何设置某个数据点的颜色或者数据标签的颜色值
- 使用jquery图表插件jqplot之折线图
- jqPlot图表插件学习之饼状图和环状图
- jqPlot图表插件学习之柱形图和旋转分类名称
- 三、highcharts 如何设置图表配置选项
- Win8如何升级flash Win8系统升级flash插件的设置方法
- Idea自带的maven插件如何设置环境变量
- 自定义扩展名的文件在eclipse中如何设置相应的插件进行查看
- 如何使用A*插件实现移动以及网格的动态生成
- 图表插件Highcharts的动态化赋值,实现图表数据的动态化设置显示
- jqPlot Web图表插件
- 如何设置(修改)jetty(maven插件maven-jetty-plugi)的端口
- 如何去除Excel图表网格线?
- jqPlot图表插件学习之数据节点高亮和光标提示
- highcharts图表组件实战经验篇:如何设置柱状图柱子立体(颜色渐变)效果类似3D效果之linearGradient和stops