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', 那么每个刻度线都有上顶点和下顶点,刻度线与坐标轴
在刻度线中间交叉,那么这时这个距离×2
show: true, //是否显示刻度线,与刻度线同方向的网格线,以及坐标轴上的刻度值
showLabel: true, //是否显示刻度线以及坐标轴上的刻度值
formatString: '', //设置坐标轴上刻度值显示格式,eg:'%b %#d, %Y'表示格式"月 日,年","AUG 30,2008"
fontSize:'10px', //刻度值的字体大小
fontFamily:'Tahoma', //刻度值上字体
angle:40, //刻度值与坐标轴夹角,角度为坐标轴正向顺时针方向
fontWeight:'normal', //字体的粗细
fontStretch:1//刻度值在所在方向(坐标轴外)上的伸展(拉伸)度
}
showTicks: true, //是否显示刻度线以及坐标轴上的刻度值,
showTickMarks: true, // 设置是否显示刻度
useSeriesColor: true //如果有多个纵(横)坐标轴,通过该属性设置这些坐标轴是否以不同颜色显示
},
axes: {
xaxis: {
// same options as axesDefaults
},
yaxis: {
// same options as axesDefaults
},
x2axis: {
// same options as axesDefaults
},
y2axis: {
// same options as axesDefaults
}
},
seriesDefaults: {//如果有多个分类,这可通过该配置属性设置各个分类的共性属性
show: true, //设置是否渲染整个图表区域(即显示图表中内容).
xaxis: 'xaxis', // either 'xaxis' or 'x2axis'.
- 1
- 2
- 3
- 4
- 5
前往页