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

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

官方地址：http://binations with for the series in the plot are shown.

},

// Dragable（拖动）
//该配置对象通过seriesDefaults和series配置对象进行配置
seriesDefaults: {
dragable: {
color: undefined, // 当拖动数据点是，拖动线与拖动数据点颜色
constrainTo: 'none', //设置拖动的的范围: 'x'（只能在横向上拖动）,
// 'y'（只能在纵向上拖动）, or 'none'（无限制）.
},
},
// Highlighter（高亮）
//设置高亮动作option属性对象
//鼠标移动到某个数据点上时，该数据点增大并显示提示信息框
//该配置对象直接在option下配置
highlighter: {
lineWidthAdjust: 2.5, //当鼠标移动到放大的数据点上时，设置增大的数据点的宽度
// 目前仅适用于非实心数据点
sizeAdjust: 5, // 当鼠标移动到数据点上时，数据点扩大的增量增量
showTooltip: true, // 是否显示提示信息栏
tooltipLocation: 'nw', // 提示信息显示位置（英文方向的首写字母）: n, ne, e, se, s, sw, w, nw.
fadeTooltip: true, // 设置提示信息栏出现和消失的方式（是否淡入淡出）
tooltipFadeSpeed: "fast"//设置提示信息栏淡入淡出的速度： slow, def, fast, 或者是一个毫秒数的值.
tooltipOffset: 2, // 提示信息栏据被高亮显示的数据点的偏移位置，以像素计。
tooltipAxes: 'both', // 提示信息框显示数据点那个坐标轴上的值，目前有横/纵/横纵三种方式。
//值分别为 x, y or xy.
tooltipSeparator: ', ' // 提示信息栏不同值之间的间隔符号
useAxesFormatters: true // 提示信息框中数据显示的格式是否和该数据在坐标轴上显示格式一致
tooltipFormatString: '%.5P' // 用于设置提示信息框中数据显示的格式，前提条件是useAxesFormatters
// 为false. 此时信息提示框中数据格式不再与坐标轴一致，而是以此为准
//同时，该属性还支持html格式字符串
//eg:'<b><i><span style="color:red;" mce_style="color:red;">hello</span></i></b> %.2f'
},

// LogAxisRenderer(指数渲染器)
// 该渲染器只有两个属性， 指数渲染器通过axesDefaults和axes配置对象进行配置

axesDefaults: {
base: 10, // 指数的底数
tickDistribution: 'even', // 坐标轴显示方式：'even' or 'power'. 'even' 产生的是均匀分布于坐标
//轴上的坐标刻度值 。而'power' 则是根据不断增大的增数来确定坐标轴上的刻度
},

// PieRenderer(设置饼状图的OPtion对象)
// 饼状图通过seriesDefaults和series配置对象进行配置

seriesDefaults: {
rendererOptions: {
diameter: undefined, // 设置饼的直径
padding: 20, // 饼距离其分类名称框或者图表边框的距离，变相该表饼的直径
sliceMargin: 20, // 饼的每个部分之间的距离
fill:true, // 设置饼的每部分被填充的状态
shadow:true, //为饼的每个部分的边框设置阴影，以突出其立体效果
shadowOffset: 2, //设置阴影区域偏移出饼的每部分边框的距离
shadowDepth: 5, // 设置阴影区域的深度
shadowAlpha: 0.07 // 设置阴影区域的透明度
}
},

//pointLabels(数据点标签)
//用于在数据点所在位置显示相关信息（非提示框性质）
seriesDefaults: {
pointLabels: {
location:'s',//数据标签显示在数据点附近的方位
ypadding:2 //数据标签距数据点在纵轴方向上的距离
}
}

// Trendline（趋势线）
// 饼状图通过seriesDefaults和series配置对象进行配置

seriesDefaults: {
trendline: {
show: true, // 是否显示趋势线
color: '#666666', // 趋势线颜色
label: '', // 趋势线名称
type: 'linear', //趋势线类型'linear'（直线）, 'exponential'（幂值数线） or 'exp'
shadow: true, // 同grid相同属性设置
lineWidth: 1.5, // 趋势线宽度
shadowAngle: 45, // 同grid相同属性设置
shadowOffset: 1.5, // 同grid相同属性设置
shadowDepth: 3, // 同grid相同属性设置
shadowAlpha: 0.07 // 同grid相同属性设置
}
}
}

后边我会讲解其用法和简单的举例。