如何设置 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><XAxisSettingLabel='这里是 <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"><AxesSettingYAxisSetting-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]]]"><AxesSettingXAxisSetting-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]]]"><AxesSettingX2AxisSetting-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]]]"><AxesDefaultsSettingBorderColor="Red"        NumberTicks="3"></AxesDefaultsSetting></je:Plot>

网格

样式

可设置直线的颜色和宽度等:

<je:Plot ID="plot2" runat="server" IsVariable="true"    Data="[[[0,0],[1,4],[2,4]]]"><GridSettingBackground="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]]]"><GridSettingShadowDepth="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/, 建议全屏观看.

转载于:https://www.cnblogs.com/zoyobar/archive/2012/01/19/plot_2.html

如何设置 jqplot 图表插件的轴和网格相关推荐

如何设置 jqplot 图表插件的标题图例和直线
好, 我想大部分朋友都已经有回到了让人痛苦的办公桌上, 给大家带来我攒好的一篇文章, 关于 jqplot 的标题, 图例和直线的设置. 本文将详细的讲解如何设置 Plot 图表的标题, 图例和序列, ...
设置echarts图表上Y轴的单位
设置echarts图表上Y轴的单位代码如下: yAxis: [{type: 'value',axisLabel: {show: true,interval: 'auto',formatter: '{ ...
jqPlot图表插件使用说明（一）
2019独角兽企业重金招聘Python工程师标准>>> 最简陋的线形图第一步:引入必要的CSS.JS文件 <link rel="stylesheet" t ...
一款可定制的外国jQuery图表插件jqplot
jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图和柱状图.jqPlot支持为图表设置各种不同的样式.提供Tooltips,数据点高亮显示等功能. 用法: 1.引入jQuery类库和相 ...
图表插件Highcharts的动态化赋值，实现图表数据的动态化设置显示
在很早之前就介绍过图表插件Highcharts的使用了,在2014年的随笔<基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts>,这里基本上都介绍 ...
JavaScript 音频插件和图表插件
howler音频插件配置项及事件 <!DOCTYPE html> <html lang="en"> <head><meta charse ...
wxml 点击图片下载_小程序图表插件
最近做小程序需要统计一些数据,需要用到图表插件,所有在网上找了找,找到了wx-charts这个插件,看着挺好用的,和jq的echarts类似,所有选择用这个插件来画图表,wx-charts是基于can ...
微信小程序图表插件（wx-charts）
微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个. wx- ...
图表插件 - chart.js (柱状图) 学习总结
chart.js 基于H5的canvas,轻量级的图表插件. 有6中图表类型:折线图.条形图.雷达图.饼图.柱状图.极地区域图关于柱状图的绘制,追加 .更新.删除数据等操作的总结原文来自于:htt ...

如何设置 jqplot 图表插件的轴和网格

如何设置 jqplot 图表插件的轴和网格相关推荐

最新文章

热门文章