jquery jqPlot API 中文使用教程
来源:互联网 发布:asp php net 环境集成 编辑:程序博客网 时间:2024/05/21 22:05
jqPlot是一个灰常强大的图表工具,曲线,柱状,饼图,应该有尽有,更要命的是,调用方便~~
官网:http://www.jqplot.com/
这里贡献上中文教程,基本上所有的api都很齐全,供有需要的童鞋们瞧瞧,更重要的是作为自己滴收藏~~哦耶耶~
jqPlot整的来说有三个地方需要配置。格式如:
$.jqplot(‘target’, data, options);target:要显示的位置。data:显示的数据。options:其它配置
seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
"#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // 默认显示的分类颜色,如果分类的数量超过这里的颜色数量,则从该队列中第一个位置开始重新取值赋给相应的分类
stackSeries: false, // 如果置为true并且有多个分类(如果是折线图,就必须多于一条折线), 那么每个分类(折线)在纵轴上的值为其前所有分类纵轴值总和与其纵,轴值相加值(eg, 当前分类纵轴值为Y3
title: '', //设置当前图的标题
title: {
text: '', //设置当前图的标题
show: true,//设置当前图的标题是否显示
},
axesDefaults: {
show: false, 是否自动显示坐标轴。
min: null, 横(纵)轴最小刻度值
max: null, 横(纵)轴最大刻度值
pad: 1.2, 横(纵)轴度值增涨因子
ticks: [], //设置横(纵)坐标的刻度上的值,可为该ticks数组中的值
numberTicks: undefined,//一个相除因子,用于设置横(纵)坐标刻度间隔,横(纵)坐标刻度间隔值=横(纵)坐标区间长度/(numberTicks-1)
renderer: $.jqplot.LinearAxisRenderer, // 设置横(纵)轴上数据加载的渲染器
rendererOptions: {}, // 设置renderer的Option配置对象,线状图不需要设置
tickOptions: {
mark: 'outside', // 设置刻度在坐标轴上的显示方式:分为:坐标轴外显示,内显示,和穿过显示;其值分别为 'outside', 'inside' or 'cross'。
showMark: true, //设置是否显示刻度
showGridline: true, // 是否在图表区域显示刻度值方向的网格
markSize: 4, // 每个刻度线顶点距刻度线在坐标轴上点距离(像素为单位)如果mark值为 'cross', 那么每个刻度线都有上顶点和下顶点,刻度线与坐标轴