如何设置 jqplot 图表插件的标题图例和直线

好, 我想大部分朋友都已经有回到了让人痛苦的办公桌上, 给大家带来我攒好的一篇文章, 关于 jqplot 的标题, 图例和直线的设置.

本文将详细的讲解如何设置 Plot 图表的标题, 图例和序列, 目录如下:

* 准备

* 标题

* 图例

* 位置

* 文本

* 序列

* 直线

* 轴

* 填充

* 阴影

* 图例文本

* 默认设置

* (这里是没有完成的章节)

准备

请先查看 http://code.google.com/p/zsharedcode/wiki/JQueryElementPlotDoc 或者准备一节的内容.

标题

通过 TitleSetting属性可以设置图表的标题:

<je:Plot ID="plot1" runat="server" IsVariable="true"    Data="[[[1,2],[3,4]]]"><TitleSettingText="这里是一个标题"        TextAlign="right"        TextColor="Blue"        FontSize="10pt" /></je:Plot>

Text 是标题的文本, TextAlign 是标题的对齐方式, TextColor 是标题的颜色, 而 FontSize 是字体的大小.

图例

位置

通过 LegendSetting 的 Location 和 Placement属性可以设置图例的显示位置:

<je:Plot ID="plot1" runat="server" IsVariable="true"    Data="[[[1,2],[3,4]]]"><LegendSettingShow="true"        Location="sw"        Placement="outsideGrid" /></je:Plot>

文本

通过 Labels 属性可以设置图例的文本, 形式为一个 javascript 数组, 每一个元素对应一个序列的图例文本, 默认为 Series N:

<je:Plot ID="plot2" runat="server" IsVariable="true"    Data="[[[1,2],[3,4]],[[3,2],[3,1]]]"><LegendSetting Show="true"        Labels="['直线 1','<u>直线 2</u>']" /></je:Plot>

设置 EscapeHtml 属性为 true, 则 html代码将显示为文本:

<je:Plot ID="plot3" runat="server" IsVariable="true"    Data="[[[1,2],[3,4]],[[3,2],[3,1]],[[5,0],[7,9]]]"><LegendSetting Show="true"        Labels="['直线 1','<u>直线 2</u>']"        EscapeHtml="true" /></je:Plot>

序列

通过 SeriesSetting 可以设置每一个序列.

直线

添加 Series对象, 可以增加对序列的设置:

<je:Plot ID="plot1" runat="server" IsVariable="true"    Data="[[[1,2],[3,4]]]"><SeriesSetting><je:SeriesColor="Green"            LineWidth="5"            LinePattern="dashed"></je:Series></SeriesSetting></je:Plot>

在上面代码中, 设置第一个序列的颜色为绿色, 宽度为 5 像素, 样式为虚线.

轴

通过 XAxis 和 YAxis 可以设置序列所使用轴:

<je:Plot ID="plot2" runat="server" IsVariable="true"    Data="[[[1,2],[3,4]]]"><SeriesSetting><je:Series XAxis="x2axis" YAxis="y2axis"></je:Series></SeriesSetting></je:Plot>

填充

设置 Fill 为 true, 将填充直线和某个刻度之间的空白:

<je:Plot ID="plot3" runat="server" IsVariable="true"    Data="[[[2,2],[3,5],[5,3]]]"><SeriesSetting><je:Series Fill="true"></je:Series></SeriesSetting></je:Plot>

通过 FillAlpha 和 FillColor 可以设置填充的透明度和颜色, 设置 FillAndStroke为 true, 则将在显示填充的同时显示直线:

<je:Plot ID="plot4" runat="server" IsVariable="true"    Data="[[[-1,-1],[3,0],[4,3]]]"><SeriesSetting><je:Series Fill="true"            FillAlpha="0.4"            FillColor="Red"            FillAndStroke="true"></je:Series></SeriesSetting></je:Plot>

设置 FillToZero 为 true, 则填充以 0 为基线:

阴影

同样可是设置序列的阴影:

<je:Plot ID="plot6" runat="server" IsVariable="true"    Data="[[[1,1],[2,3],[5,3]]]"><SeriesSetting><je:SeriesShadowAngle="30"            ShadowDepth="10"            ShadowOffset="3"></je:Series></SeriesSetting></je:Plot>

图例文本

Label属性表示序列在图例中的文本:

<je:Plot ID="plot7" runat="server" IsVariable="true"    Data="[[[1,2],[2,4],[3,3]]]" LegendSetting-Show="true"><SeriesSetting><je:Series Label="Hello!!!"></je:Series></SeriesSetting></je:Plot>

默认设置

通过 SeriesDefaultsSetting可以设置所有的序列:

<je:Plot ID="plot8" runat="server" IsVariable="true"    Data="[[[1,3],[2,1],[3,5]],[[1,1],[2,0],[3,3]]]"><SeriesDefaultsSetting LineWidth="8"></SeriesDefaultsSetting></je:Plot>

(这里是没有完成的章节)

JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.

实际过程演示: http://www.tudou.com/programs/view/xIlCrBoRSc8/, 建议全屏观看.

转载于:https://www.cnblogs.com/zoyobar/archive/2012/01/29/Plot3.html

如何设置 jqplot 图表插件的标题图例和直线相关推荐

如何设置 jqplot 图表插件的轴和网格
春节即将到来, 这是节前的最后一篇, 来说明下 jqplot 的轴和网格的设置. 请到 Download 下载资源的 JQueryElement 示例下载一节下载示例代码, 目录 /plot/Def ...
jqPlot图表插件使用说明（一）
2019独角兽企业重金招聘Python工程师标准>>> 最简陋的线形图第一步:引入必要的CSS.JS文件 <link rel="stylesheet" t ...
如何为py图表添加坐标轴/标题/图例等辅助元素
本博文源于<python数据可视化>(黑马程序员编著)旨在讲解如何使用python对画出的图表定制出坐标轴.标题.图例.网格.参考线.参考区域.注释文本和表格. 文章目录 1.设置坐标轴标 ...
一款可定制的外国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 ...
【jQuery】兼容IE6的图表插件Highcharts
在网页中有时候需要画出统计图,尤其是一些OA系统中,这样能够给各位看官一个直观的数据显示.图表用很多东西都能画出来,比如JSP可以利用JAVA本身就有的绘图函数,php有jpgraph插件,具体请看& ...
数据呈现图表插件Highcharts介绍+图表联动案例
由于项目需要,学习并使用了Highcharts图表插件,这是一款功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库插件. Highcharts简介下边的介绍来自Highcharts中文 ...
ECharts 图表插件使用整理（图表配置实现）
ECharts 图表插件使用整理说明 ECharts 是一个 JavaScript 实现的开源可视化库,兼容当前绝大部分浏览器 IE 8 以上,是一个可高度个性化定制的数据可视化图表 ECharts ...

如何设置 jqplot 图表插件的标题图例和直线

如何设置 jqplot 图表插件的标题图例和直线相关推荐

最新文章

热门文章