2024年3月13日发(作者：vivoy79a价格多少)

jqPlot 图形报表插件简介及参数详解(jquery)

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

性的js图表插件。

jqPlot是一款基于jquery类库的图标绘制插件。通过jqPlot可以再网页中绘制线状、柱状、饼状等多种样式图表。而且，jqPlot

具有插件可扩展性(Pluggability)，你可以编写自己的图表样式。

功能概述：

1. 有多种图表样式可供选择

2. 可以自定义日期轴线

3. 可设置旋转轴文字

4. 自动计算趋势线

5. 工具条提示和高亮数据点

6. 默认最优设置，非常易于使用

以上功能在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:'', //横（纵）坐标刻度间隔值，可为日期字符串

1

renderer: $.AxisRenderer, // 设置横（纵）轴上数据加载的渲染器,有dateAxisRenderer（参见本文

最后相关介绍） 。

rendererOptions: {}, // 设置renderer的Option配置对象，线状图不需要设置

//不同图表的Option配置对象请参见下面《jqPlot各个不同插件的Option对象设置》

//中各个图表的配置Option对象

tickOptions: {

mark: 'outside', // 设置横（纵）坐标刻度在坐标轴上显示方式，分为坐标轴内，外，穿过坐标轴显示

// 值也分为：'outside', 'inside' 和 '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: {

// 设置同 axisDefaults

},

yaxis: {

// 设置同 axisDefaults

},

x2axis: {

// 设置同 axisDefaults

},

y2axis: {

// 设置同 axisDefaults

}

},

seriesDefaults: {//如果有多个分类，这可通过该配置属性设置各个分类的共性属性

show: true, // 设置是否渲染整个图表区域（即显示图表中内容）

xaxis: 'xaxis', // either 'xaxis' or 'x2axis'.

yaxis: 'yaxis', // either 'yaxis' or 'y2axis'.

label: '', // 用于显示在分类名称框中的分类名称

color: '', // 分类在图标中表示（折现，柱状图等）的颜色

lineWidth: 2.5, // 分类图（特别是折线图）哪宽度

shadow: true, // 各图在图表中是否显示阴影区域

2