jqPlot 是一个 jquery 的插件，用于生成客户端 javascript 图表。
jqPlot官网： http://www.jqplot.com/
下载地址：http://www.bitbucket.org/cleonello/jqplot/
jqPlot 基本依赖：
- jquery1.4.3+
- jqPlot.js
- jqPlot.css
- excanvas (IE条件引入，给不支持canvas的 IE6/7/8 提供增强，经测试 IE6/7 下无法使用 jqplot)
基本用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jqplot</title>
<!--[if lt IE 9]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.css" />
<script>
$(document).ready(function(){
$.jqplot('chartdiv',[[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
});
</script>
</head>
<body>
<div id="chartdiv" style="width:300px;">
</div>
</body>
</html>
显示效果：
基本options：
创建 jqplot 时可传入配置项 options：$.jqplot('target',seriesData,options);
jqPlot-| |-seriesColors |-textColor |-fontFamily |-fontSize |-stackSeries |-series(Array)-| | |-Series1-| | | |-lineWidth | | |-shadow | | |-showLine | | |-showMarker | | |-color | |-Series2... | |-... | |-SeriesN | |-grid(Object)-| | |-drawGridLines | |-background | |-borderColor | |-borderWidth | |-shadow | |-title(Object)-| | |-text | |-show | |-fontFamily | |-fontSize | |-textAlign | |-textColor | |-axes(Object)-| | |-xais-| | | |-min | | |-max | | |-numberTicks | | |-showTicks | | |-showTickMarks | | |-pad | | ... and so on
options 说明如下，未包含所有的 options 项，直接阅读会行益出，要编辑状态阅读，有时间搞一下 排版及翻译
options =
{
seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
"#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // colors that will
// be assigned to the series. If there are more series than colors, colors
// will wrap around and start at the beginning again.
stackSeries: false, // if true, will create a stack plot.
// Currently supported by line and bar graphs.
title: '', // Title for the plot. Can also be specified as an object like:
title: {
text: '', // title for the plot,
show: true,
},
axesDefaults: {
show: false, // wether or not to renderer the axis. Determined automatically.
min: null, // minimum numerical value of the axis. Determined automatically.
max: null, // maximum numverical value of the axis. Determined automatically.
pad: 1.2, // a factor multiplied by the data range on the axis to give the
// axis range so that data points don't fall on the edges of the axis.
ticks: [], // a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...]
// array of ticks to use. Computed automatically.
numberTicks: undefined,
renderer: $.jqplot.LinearAxisRenderer, // renderer to use to draw the axis,
rendererOptions: {}, // options to pass to the renderer. LinearAxisRenderer
// has no options,
tickOptions: {
mark: 'outside', // Where to put the tick mark on the axis
// 'outside', 'inside' or 'cross',
showMark: true,
showGridline: true, // wether to draw a gridline (across the whole grid) at this tick,
markSize: 4, // length the tick will extend beyond the grid in pixels. For
// 'cross', length will be added above and below the grid boundary,
show: true, // wether to show the tick (mark and label),
showLabel: true, // wether to show the text label at the tick,
formatString: '', // format string to use with the axis tick formatter
}
showTicks: true, // wether or not to show the tick labels,
showTickMarks: true, // wether or not to show the tick marks
},
axes: {
xaxis: {
// same options as axesDefaults
},
yaxis: {
// same options as axesDefaults
},
x2axis: {
// same options as axesDefaults
},
y2axis: {
// same options as axesDefaults
}
},
seriesDefaults: {
show: true, // wether to render the series.
xaxis: 'xaxis', // either 'xaxis' or 'x2axis'.
yaxis: 'yaxis', // either 'yaxis' or 'y2axis'.
label: '', // label to use in the legend for this line.
color: '', // CSS color spec to use for the line. Determined automatically.
lineWidth: 2.5, // Width of the line in pixels.
shadow: true, // show shadow or not.
shadowAngle: 45, // angle (degrees) of the shadow, clockwise from x axis.
shadowOffset: 1.25, // offset from the line of the shadow.
shadowDepth: 3, // Number of strokes to make when drawing shadow. Each
// stroke offset by shadowOffset from the last.
shadowAlpha: 0.1, // Opacity of the shadow.
showLine: true, // whether to render the line segments or not.
showMarker: true, // render the data point markers or not.
fill: false, // fill under the line,
fillAndStroke: false, // *stroke a line at top of fill area.
fillColor: undefined, // *custom fill color for filled lines (default is line color).
fillAlpha: undefined, // *custom alpha to apply to fillColor.
renderer: $.jqplot.LineRenderer], // renderer used to draw the series.
rendererOptions: {}, // options passed to the renderer. LineRenderer has no options.
markerRenderer: $.jqplot.MarkerRenderer, // renderer to use to draw the data
// point markers.
markerOptions: {
show: true, // wether to show data point markers.
style: 'filledCircle', // circle, diamond, square, filledCircle.
// filledDiamond or filledSquare.
lineWidth: 2, // width of the stroke drawing the marker.
size: 9, // size (diameter, edge length, etc.) of the marker.
color: '#666666' // color of marker, set to color of line by default.
shadow: true, // wether to draw shadow on marker or not.
shadowAngle: 45, // angle of the shadow. Clockwise from x axis.
shadowOffset: 1, // offset from the line of the shadow,
shadowDepth: 3, // Number of strokes to make when drawing shadow. Each stroke
// offset by shadowOffset from the last.
shadowAlpha: 0.07 // Opacity of the shadow
}
},
series:[
{Each series has same options as seriesDefaults},
{You can override each series individually here}
],
legend: {
show: false,
location: 'ne', // compass direction, nw, n, ne, e, se, s, sw, w.
xoffset: 12, // pixel offset of the legend box from the x (or x2) axis.
yoffset: 12, // pixel offset of the legend box from the y (or y2) axis.
},
grid: {
drawGridLines: true, // wether to draw lines across the grid or not.
gridLineColor: '#cccccc' // *Color of the grid lines.
background: '#fffdf6', // CSS color spec for background color of grid.
borderColor: '#999999', // CSS color spec for border around grid.
borderWidth: 2.0, // pixel width of border around grid.
shadow: true, // draw a shadow for grid.
shadowAngle: 45, // angle of the shadow. Clockwise from x axis.
shadowOffset: 1.5, // offset from the line of the shadow.
shadowWidth: 3, // width of the stroke for the shadow.
shadowDepth: 3, // Number of strokes to make when drawing shadow.
// Each stroke offset by shadowOffset from the last.
shadowAlpha: 0.07 // Opacity of the shadow
renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid.
rendererOptions: {} // options to pass to the renderer. Note, the default
// CanvasGridRenderer takes no additional options.
},
// Plugin and renderer options.
// BarRenderer.
// With BarRenderer, you can specify additional options in the rendererOptions object
// on the series or on the seriesDefaults object. Note, some options are respecified
// (like shadowDepth) to override lineRenderer defaults from which BarRenderer inherits.
seriesDefaults: {
rendererOptions: {
barPadding: 8, // number of pixels between adjacent bars in the same
// group (same category or bin).
barMargin: 10, // number of pixels between adjacent groups of bars.
barDirection: 'vertical', // vertical or horizontal.
barWidth: null, // width of the bars. null to calculate automatically.
shadowOffset: 2, // offset from the bar edge to stroke the shadow.
shadowDepth: 5, // nuber of strokes to make for the shadow.
shadowAlpha: 0.8, // transparency of the shadow.
}
},
// Cursor
// Options are passed to the cursor plugin through the "cursor" object at the top
// level of the options object.
cursor: {
style: 'crosshair', // A CSS spec for the cursor type to change the
// cursor to when over plot.
show: true,
showTooltip: true, // show a tooltip showing cursor position.
followMouse: false, // wether tooltip should follow the mouse or be stationary.
tooltipLocation: 'se', // location of the tooltip either relative to the mouse
// (followMouse=true) or relative to the plot. One of
// the compass directions, n, ne, e, se, etc.
tooltipOffset: 6, // pixel offset of the tooltip from the mouse or the axes.
showTooltipGridPosition: false, // show the grid pixel coordinates of the mouse
// in the tooltip.
showTooltipUnitPosition: true, // show the coordinates in data units of the mouse
// in the tooltip.
tooltipFormatString: '%.4P', // sprintf style format string for tooltip values.
useAxesFormatters: true, // wether to use the same formatter and formatStrings
// as used by the axes, or to use the formatString
// specified on the cursor with sprintf.
tooltipAxesGroups: [], // show only specified axes groups in tooltip. Would specify like:
// [['xaxis', 'yaxis'], ['xaxis', 'y2axis']]. By default, all axes
// combinations with for the series in the plot are shown.
},
// Dragable
// Dragable options are specified with the "dragable" object at the top level
// of the options object.
dragable: {
color: undefined, // custom color to use for the dragged point and dragged line
// section. default will use a transparent variant of the line color.
constrainTo: 'none', // Constrain dragging motion to an axis: 'x', 'y', or 'none'.
},
// Highlighter
// Highlighter options are specified with the "highlighter" object at the top level
// of the options object.
highlighter: {
lineWidthAdjust: 2.5, // pixels to add to the size line stroking the data point marker
// when showing highlight. Only affects non filled data point markers.
sizeAdjust: 5, // pixels to add to the size of filled markers when drawing highlight.
showTooltip: true, // show a tooltip with data point values.
tooltipLocation: 'nw', // location of tooltip: n, ne, e, se, s, sw, w, nw.
fadeTooltip: true, // use fade effect to show/hide tooltip.
tooltipFadeSpeed: "fast"// slow, def, fast, or a number of milliseconds.
tooltipOffset: 2, // pixel offset of tooltip from the highlight.
tooltipAxes: 'both', // which axis values to display in the tooltip, x, y or both.
tooltipSeparator: ', ' // separator between values in the tooltip.
useAxesFormatters: true // use the same format string and formatters as used in the axes to
// display values in the tooltip.
tooltipFormatString: '%.5P' // sprintf format string for the tooltip. only used if
// useAxesFormatters is false. Will use sprintf formatter with
// this string, not the axes formatters.
},
// LogAxisRenderer
// LogAxisRenderer add 2 options to the axes object. These options are specified directly on
// the axes or axesDefaults object.
axesDefaults: {
base: 10, // the logarithmic base.
tickDistribution: 'even', // 'even' or 'power'. 'even' will produce with even visiual (pixel)
// spacing on the axis. 'power' will produce ticks spaced by
// increasing powers of the log base.
},
// PieRenderer
// PieRenderer accepts options from the rendererOptions object of the series or seriesDefaults object.
seriesDefaults: {
rendererOptions: {
diameter: undefined, // diameter of pie, auto computed by default.
padding: 20, // padding between pie and neighboring legend or plot margin.
sliceMargin: 0, // gap between slices.
fill: true, // render solid (filled) slices.
shadowOffset: 2, // offset of the shadow from the chart.
shadowDepth: 5, // Number of strokes to make when drawing shadow. Each stroke
// offset by shadowOffset from the last.
shadowAlpha: 0.07 // Opacity of the shadow
}
},
// Trendline
// Trendline takes options on the trendline object of the series or seriesDefaults object.
seriesDefaults: {
trendline: {
show: true, // show the trend line
color: '#666666', // CSS color spec for the trend line.
label: '', // label for the trend line.
type: 'linear', // 'linear', 'exponential' or 'exp'
shadow: true, // show the trend line shadow.
lineWidth: 1.5, // width of the trend line.
shadowAngle: 45, // angle of the shadow. Clockwise from x axis.
shadowOffset: 1.5, // offset from the line of the shadow.
shadowDepth: 3, // Number of strokes to make when drawing shadow.
// Each stroke offset by shadowOffset from the last.
shadowAlpha: 0.07 // Opacity of the shadow
}
}
}
renderer & plugin
renderer 是一个用于绘制某些东西的 object，与 jqplot 中已存在的(数据)对象连接以绘成图表。
plugin 与只提供绘图功能相比，提供了更多的功能：比如计算走势线、改变游标、提供事件驱动功能等等。
可以这样说：renderer 都是一种 plugin，而 plugin 不一定是renderer。
通过引入 renderer 或 plugin 的 js 库，并配置 options 即可简单使用，比如使用 BarRenderer 并配置 BarWidth：
optionsObj = {
seriesDefaults:{
renderer:$.jqplot.BarRenderer},
rendererOptions:{
barWidth:25
},
axes:{xaxis:{renderer:$.jqplot.CategoryAxisRenderer}}
}
几个需要记住的重点：
- 当你在 api docs 中看到 "this" 时，一般 "this" 所指的对象名(小写) 就是一个 options 配置项
- seriesDefaults 、axesDefaults 用起来非常方便
- 给 renderer 配置参数时，一般使用 rendererOptions
- plugin 可能会添加其自己的 配置属性，如 "highlighter" 、"cursor"
- 在 plot 创建后可以给 plot 设置属性(如：plot.grid.shadow=false)，记得调用 plot 的 reinitialize / redraw 方法
附件中是几个关于 jqplot 的小练习,具体问题还要查阅 官方强大的 docs & api