jqplot 简介

edison87915

浏览: 199383 次
性别:
来自: 南京

最近访客更多访客>>

freepest

jidizhanshi0

limao.zhan

Helenhhj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQPlot

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