JqPlot chart Chinese API user documentation and source code and online examples

Introduction

Jqplot is a very good jquery-based chart plug-in. This article mainly helps you sort out the Chinese usage instructions of jqplot and download online examples and source code. The jqplot plug-in displays charts on the canvas in HTML5-supported browsers.

Introduce script files

Jqplot must be supported by jquery version 1.4.3 or later. As mentioned earlier, jqplot will be presented as Canvas in browsers that support HTML5 canvas. Otherwise, if you are using a browser earlier than IE9, introduce excanvas. js files. Of course, jqplot CSS files should also be introduced at the same time. The Code is as follows:

Copy codeThe Code is as follows: <! -- [If lt IE 9]> <script language = "javascript" type = "text/javascript" src = "excanvas. js"> </script> <! [Endif] -->
<Script language = "javascript" type = "text/javascript" src = "jquery. min. js"> </script>
<Script language = "javascript" type = "text/javascript" src = "jquery. jqplot. min. js"> </script>
<Link rel = "stylesheet" type = "text/css" href = "jquery.jqplot.css"/>

Add a plot container

We can add a container for jqplot on the page, such as div, but note that we need to specify the width and height for this div container, as shown in the following code:

<Div id = "chartdiv" style = "height: 400px; width: 300px;"> </div>

Start creating a plot chart

Next, we can call $. jqplot in the created container to generate and render the chart. For example, if the following data is used to initialize the jqplot chart:

$. Jqplot ('chartdiv ', [[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [1, 11,219.9]);

Shows the final display effect:

Jqplot attribute options
When calling $. jqplot, We can input some parameters options to customize jqplot. Some parameters options are as follows:Copy codeThe Code is as follows: seriesColors: ["#4bb2c5", "# c5b47f", "# EAA228", "#579575", "#839557", "#958c12 ",
"#953579", "#4b5de4", "# d8b83f", "# ff5800", "# 0085cc"], // The default category color, if the number of categories exceeds the color Quantity,
// The value is assigned to the corresponding category from the first position in the queue.
StackSeries: false, // if it is set to true and there are multiple categories (if it is a line chart, there must be more than one line), then each category (line chart)
// The value on the vertical axis is the sum of the values of the vertical axis and its vertical and vertical axis values of all the previous categories.
Title: '', // set the title of the current Graph
Title :{
Text: '', // set the title of the current Graph
Show: true, // set whether the title of the current graph is displayed
},
AxesDefaults :{
Show: false. Whether to automatically display the axis.
Min: null, minimum scale value of the horizontal (vertical) axis
Max: null, maximum scale value of the horizontal (vertical) axis
Pad: 1.2, horizontal (vertical) axis increase factor
Ticks: [], // set the value on the scale of the horizontal (vertical) Coordinate, can be the value in the ticks Array
NumberTicks: undefined, // a phase division factor, used to set the horizontal (vertical) coordinate scale interval, horizontal (vertical) coordinate scale interval value = horizontal (vertical) Coordinate Interval Length/(numberTicks-1)
Renderer: $. jqplot. LinearAxisRenderer, // sets the renderer for data loading on the horizontal (vertical) axis.
RendererOptions: {}, // set the Option configuration object of renderer. You do not need to set the line chart.
TickOptions :{
Mark: 'outside', // set the display mode of the scale on the coordinate axis. The display modes include: show outside the coordinate axis, show inside, and show through. The values are 'outside', respectively ', 'Inside 'or 'cross '.
ShowMark: true, // you can specify whether to display the scale.
ShowGridline: true, // whether to display the grid with the scale value direction in the chart area
MarkSize: 4, // The distance between the vertices of each dial line and the distance between the vertices of the dial line on the coordinate axis (in pixels). If the mark value is 'cross ', each dial line has the upper and lower vertices, dial line and coordinate axis
Cross in the middle of the dial line, then this distance × 2
Show: true, // whether to display the dial line, grid lines in the same direction as the dial line, and the scale value on the Axis
ShowLabel: true, // whether to display the dial line and the scale value on the coordinate axis
FormatString: '', // set the display format of the scale value on the coordinate axis. For example, '% B % # d, % y' indicates the format" month, day, year "," AUG 30,2008"
FontSize: '10px ', // font size of the scale value
FontFamily: 'tahoma ', // font of the scale value
Angle: 40, // The angle between the scale value and the coordinate axis. The angle is clockwise.
FontWeight: 'normal', // font width
FontStretch: 1 // The degree of stretching in which the scale value is located (outside the axis)
}
ShowTicks: true, // whether to display the dial line and the scale value on the coordinate axis,
ShowTickMarks: true, // you can specify whether to display the scale.
UseSeriesColor: true // if multiple vertical (horizontal) axes exist, use this attribute to set whether these axes are displayed in different colors
},
Axes :{
Xaxis :{
// Same options as axesDefaults
},
Yaxis :{
// Same options as axesDefaults
},
X2axis :{
// Same options as axesDefaults
},
Y2axis :{
// Same options as axesDefaults
}
},
SeriesDefaults: {// If there are multiple categories, you can use this configuration property to set the common attributes of each category
Show: true, // sets whether to render the entire chart area (that is, display the content in the chart ).
Xaxis: 'xaxis ', // either 'xaxis' or 'x2axis '.
Yaxis: 'yaxis ', // either 'yaxis' or 'y2axis '.
Label: '', // The category name displayed in the category Name box.
Color: '', // the color of the category icon (discount, bar chart, etc.
LineWidth: 2.5, // The width of the category chart (especially the line chart.
Shadow: true, // whether the shadow area is displayed in the chart.
ShadowAngle: 45, // refer to the same parameters in grid.
ShadowOffset: 1.25, // refer to the same parameters in grid.
ShadowDepth: 3, // refer to the same parameters in grid.
ShadowAlpha: 0.1, // Opacity of the shadow.
ShowLine: true, // shows the line in the chart (line in the line chart)
ShowMarker: true, // whether to emphasize the data nodes in the graph
Fill: false, // whether to fill the area below the line in the chart (the fill color is the same as the line color) and legend
// Set the category color in the category Name box. Note that if fill is true,
// The value of showLine must be true; otherwise, the result is not displayed.
FillAndStroke: false, // when fill is true, a line is displayed at the top of the fill area (this line is displayed if it is a line chart)
FillColor: undefined, // set the color of the fill area
FillAlpha: undefined, // opacity sets the transparency of the filled Area
Renderer: $. jqplot. PieRenderer, // use the renderer (Here we use the pie graph PieRenderer) to render the existing chart
// To convert to the required chart
RendererOptions :{}, // specifies the option object of the Renderer set for the previous attribute. The linear graph Renderer does not have an option object,
// For Option configuration objects for different charts, see Option object settings for different jqPlot plug-ins.
// Configure the Option object for each chart in
MarkerRenderer: $. jqplot. MarkerRenderer, // renderer to use to draw the data
// Point markers.
MarkerOptions :{
Show: true, // whether to display data points in the graph
Style: 'filledcircle', // how each data point is displayed in the graph. The default value is "filledCircle" (solid dot ),
// Other methods: circle, diamond, square, filledCircle,
// FilledDiamond or filledSquare.
LineWidth: 2, // The width of each side of the data point (if it is too large, each side will be repeated and will display similar to a solid point)
Size: 9, // the size of the data point
Color: '# 000000' // the color of the data point
Shadow: true, // whether to display the shadow area for the data point (increase the stereoscopic effect)
ShadowAngle: 45, // shadow angle, clockwise on the X axis
ShadowOffset: 1, // refer to the same parameters in grid
ShadowDepth: 3, // refer to the same parameters in grid
ShadowAlpha: 0.07 // refer to the same parameters in grid
}
IsDragable: true, // whether to allow dragging (if the dragable package has been introduced), it can be dragged by default.
},
Series :[
// If multiple categories need to be displayed, set the configuration attributes of each category here
// Eg. Set the category name in the category Name box.
// [Label: 'traps Division '}, {label: 'decoy' Division'}, {label: 'harmony Division '}] // The configuration parameter settings are the same as those of seriesDefaults.
],
Legend :{
Show: false, // set whether the category Name box appears (that is, the names of all categories appear in a certain position of the graph)
Location: 'ne ', // The position shown in the category Name box is nw, n, ne, e, se, s, sw, w.
Xoffset: 12, // The distance between the category Name box and the border on the chart area (unit: px)
Yoffset: 12, // The distance between the category Name box and the left border of the chart area (unit: px)
Background: ''// The category Name box is located at the background color of the chart area.
TextColor: ''// The font color of the category Name box in the chart area.
},
Grid :{
DrawGridLines: true, // wether to draw lines except ss the grid or not.
GridLineColor: '# cccccc' // set the color of the grid background line in the entire icon Area
Background: '# fffdf6', // sets the background color of the entire chart area.
BorderColor: '#999999', // sets the color of the chart's (outermost side) border.
BorderWidth: 2.0, // you can specify the Border width of the (outermost) chart.
Shadow: true, // set a shadow for the entire icon (outermost side) border to highlight its stereoscopic effect
ShadowAngle: 45, // sets the angle of the shadow area and rotates clockwise from the X axis.
ShadowOffset: 1.5, // sets the distance between the partial shadow area and the image border.
ShadowWidth: 3, // set the width of the shadow area
ShadowDepth: 3, // set the number of overlapping shadows in the audio and video Areas
ShadowAlpha: 0.07 // sets the transparency of the shadow area.
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.
},
// Option object settings for different jqPlot plug-ins
// BarRenderer (sets the Option object of the bar chart)
// This Option object applies to settings related to the series and seriesDefault attributes of the bar chart.
SeriesDefaults :{
RendererOptions :{
BarPadding: 8, // you can specify the distance between two columns in the same category (px)
BarMargin: 10, // set the distance (px) between two bar columns of different categories (on the same X-axis table)
BarDirection: 'vertical ', // sets the direction of the bar chart display: vertical display and horizontal display
// Vertical or horizontal is displayed vertically by default.
BarWidth: null, // you can specify the width of each bar in a bar chart.
ShadowOffset: 2, // same attribute setting as grid
ShadowDepth: 5, // same attribute setting as grid
ShadowAlpha: 0.8, // same attribute setting as grid
}
},
// Cursor (Cursor)
// When you move the cursor to the graph, the cursor is displayed in the graph. It is usually used together with the highlighted function.
// In addition, drill a certain area in the graph by setting the zoom attribute of this attribute (zoom in the selected area)
// This configuration object is directly configured under option
Cursor :{
Style: 'crosshair', // The display style of the mouse when the mouse moves over the image. The attribute value is a css class.
Show: true, // whether to display the cursor
ShowTooltip: true, // whether to display the prompt information bar
FollowMouse: false, // whether the cursor prompt bar is moved along with the cursor (Mouse)
TooltipLocation: 'se', // set the position of the cursor prompt information bar. If followMouse = true, the location is
// The Position of the prompt message bar relative to the cursor. Otherwise, the cursor prompts the position of the Information bar in the icon.
// Optional values of this attribute: n, ne, e, se, etc.
TooltipOffset: 6, // indicates the position of the Information bar between the mouse (followMouse = true) and the coordinate axis (followMouse = false ).
ShowTooltipGridPosition: false, // whether to display the cursor position in the Information prompt bar (take the pixel distance between the left and top edge lines of the Data icon)
ShowTooltipUnitPosition: true, // whether to display the information column indicating the cursor position (take its data value on the horizontal and vertical axes)
// Note: This is different from the showTooltipGridPosition value. The former displays the coordinate value and the former displays the data value.
TooltipFormatString: '%. 4p', // same as the tooltipFormatString of Highlighter
UseAxesFormatters: true, // same as the tooltipFormatString of Highlighter
TooltipAxesGroups: [], // show only specified axes groups in tooltip. wocould specify like:
// [['Xaxis ', 'yaxis'], ['xaxis ', 'y2axis']. By default, all axes
// Combinations with for the series in the plot are shown.
},
// Dragable (drag)
// This configuration object is configured through the seriesDefaults and series configuration objects.
SeriesDefaults :{
Dragable :{
Color: undefined, // when dragging a data point, the color of the drag line and the drag data point
ConstrainTo: 'none', // set the drag range: 'X' (only horizontal drag is allowed ),
// 'Y' (can only be dragged vertically), or 'none' (unrestricted ).
},
},
// Highlighter (highlighted)
// Sets the option attribute object of the highlighted action.
// When you move the cursor to a data point, the data point increases and a prompt box is displayed.
// This configuration object is directly configured under option
Highlighter :{
LineWidthAdjust: 2.5, // when the mouse moves to the enlarged data point, set the width of the enlarged data point
// Currently only applicable to non-solid data points
SizeAdjust: 5, // incremental increase of the data point when the mouse moves to the data point
ShowTooltip: true, // whether to display the prompt information bar
TooltipLocation: 'nw ', // the position where the information is displayed (the first letter in the English direction): n, ne, e, se, s, sw, w, nw.
FadeTooltip: true, // you can specify whether to fade in or out the prompt message bar)
TooltipFadeSpeed: "fast" // sets the speed at which the prompt message bar fades in and out: slow, def, fast, or a value in milliseconds.
TooltipOffset: 2, // The offset position of the highlighted data point in the prompt information column, in pixels.
TooltipAxes: 'both ', // The value on the coordinate axis of the data point is displayed in the prompt box. Currently, there are three methods: horizontal, vertical, and horizontal.
// The values are x, y or xy.
Tooltiequalparator: ',' // specifies the delimiter between different values in the prompt information column.
UseAxesFormatters: true // whether the format of the data displayed in the prompt box is consistent with that displayed on the coordinate axis
TooltipFormatString: '%. 5' // used to set the format of the data displayed in the prompt message box. The precondition is useAxesFormatters.
// False. In this case, the data format in the prompt box is no longer the same as that in the coordinate axis.
// This attribute also supports html strings.
// Eg: '<B> <I> <span style = "color: red;" mce_style = "color: red; "> hello </span> </I> </B> %. 2f'
},
// LogAxisRenderer (exponential Renderer)
// This Renderer has only two attributes. The exponential Renderer uses the axesDefaults and axes configuration objects for configuration.
AxesDefaults :{
Base: 10, // base number of the Index
TickDistribution: 'even', // axis display mode: 'even' or 'power'. 'even' generates a uniform distribution in coordinates.
// Coordinate scale value on the axis. 'Power' determines the scale on the coordinate axis based on the increasing number of increments.
},
// PieRenderer (set the OPtion object of the pie chart)
// The pie chart is configured through the seriesDefaults and series configuration objects.
SeriesDefaults :{
RendererOptions :{
Diameter: undefined, // set the diameter of the pie
Padding: 20, // The distance between the pie and its category Name box or chart border, disguised as the diameter of the table pie
SliceMargin: 20, // distance between each part of the pie
Fill: true, // sets the status of each part of the pie.
Shadow: true, // sets a shadow for the border of each part of the pie to highlight its stereoscopic effect.
ShadowOffset: 2, // sets the distance between the border of each part of the pie to be removed from the shadow area.
ShadowDepth: 5, // sets the depth of the shadow area.
ShadowAlpha: 0.07 // sets the transparency of the shadow area.
}
},
// PointLabels (data point label)
// Displays information about the data point location (not a prompt box)
SeriesDefaults :{
PointLabels :{
Location: 's', // The location near the data point
Ypadding: 2 // The distance between data labels and data points in the vertical axis
}
}
// Trendline)
// The pie chart is configured through the seriesDefaults and series configuration objects.
SeriesDefaults :{
Trendline :{
Show: true, // whether to display the trend line
Color: '# 000000', // trend line color
Label: '', // trend line name
Type: 'linear ', // The type of the trend line 'linear' (straight line), 'exponential' (Power Line), or 'exp'
Shadow: true, // same attribute setting as grid
LineWidth: 1.5, // trend line width
ShadowAngle: 45, // same attribute setting as grid
ShadowOffset: 1.5, // same attribute setting as grid
ShadowDepth: 3, // same attribute setting as grid
ShadowAlpha: 0.07 // same attribute setting as grid
}
}
}

Here is an example of using custom parameters:Copy codeThe Code is as follows: $. jqplot ('chartdiv ', [[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11,219.9],
{Title: 'exponential line ',
Axes: {yaxis: {min:-10, max: 240 }},
Series: [{color: '#5FAB78'}]
});

Shows the display effect:

Source code download http://www.jb51.net/jiaoben/35457.html
Its official website is http://www.jqplot.com /.