站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: jqPlot 基于jquery的画图插件
搜索:
您的位置: 主页 > 教程 > 网页编程 > JavaScript > » 正文

jqPlot 基于jquery的画图插件

来源: 易采站长站
前边也讲过一个基于java的图形报表,功能及外观也不错,但存在通用性的问题。所以我们来学一个具有易用性+兼容性+可扩展性的js图表插件。

jqPlot是一款基于jquery类库的图标绘制插件。通过jqPlot可以再网页中绘制线状、柱状、饼状等多种样式图表。而且,jqPlot具有插件可扩展性(Pluggability),你可以编写自己的图表样式。

官方地址:http://www.jqplot.com/

功能概述:

有多种图表样式可供选择
可以自定义日期轴线
可设置旋转轴文字
自动计算趋势线
工具条提示和高亮数据点
默认最优设置,非常易于使用
以上功能在jqPlot主页中的示例页面有很多直观的展示。这里是它详细使用文档。

缺点:柱状图无法显示具体数据值。饼状图无法显示具体百分比。

下边是搜集的详细参数配置:
代码如下:
options =
{
seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
"#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // 默认显示的分类颜色,
//如果分类的数量超过这里的颜色数量,则从该队列中第一个位置开始重新取值赋给相应的分类
stackSeries: false, // 如果置为true并且有多个分类(如果是折线图,就必须多于一条折线),
// 那么每个分类(折线)在纵轴上的值为其前所有分类纵轴值总和与其纵
//轴值相加值(eg,当前分类纵轴值为Y3
//,其前有Y2,Y1,那么他显示在Y轴上值为Y2+Y3+Y1,目前该属性支持线图和柱状图
title: '', //设置当前图的标题
title: {
text: '', // 设置当前图的标题
show: true,//设置当前标题是否显示
},
axisDefaults: {
show: false, // wether or not to renderer the axis. Determined automatically.
min: null, // 横(纵)坐标显示的最小值
max: null, // 横(纵)坐标显示的最大值
pad: 1.2, // 一个相乘因子,
//(数据在横(纵)轴上最大值-数据在横(纵)轴上最小值)*pad值=该轴显示的横(纵)坐标区间长度
// 该轴显示的横(纵)坐标区间长度=横(纵)坐标显示的最大值-横(纵)坐标显示的最小值
//如果设置了max和min的值的话,那么会优先考虑min和max设置的值
ticks: [], //设置横(纵)坐标的刻度上的值,可为该ticks数组中的值,
// a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...]
numberTicks: undefined, //一个相除因子,用于设置横(纵)坐标刻度间隔
//横(纵)坐标刻度间隔值=横(纵)坐标区间长度/(numberTicks-1)
tickInterval:'', //横(纵)坐标刻度间隔值,可为日期字符串
renderer: $.jqplot.LinearAxisRenderer, // 设置横(纵)轴上数据加载的渲染器,有dateAxisRenderer(参见本文最后相关介绍) 。
rendererOptions: {}, // 设置renderer的Option配置对象,线状图不需要设置
Tags:
最新图文资讯
1 2 3 4 5 6
相关文章列表:
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -