jqPlot chart Chinese API usage documentation, source code and online examples

Introduction

jqplot is a very good chart plug-in based on jquery. This article mainly helps you organize the Chinese usage instructions, online examples and source code downloads of jqplot. The jqplot plug-in will render charts on canvas on browsers that support HTML5.

Introduce script files

jqplot requires jquery version 1.4.3 or above. As mentioned just now, jqplot will be rendered as canvas on browsers that support HTML5 Canvas , otherwise, if you are using a browser below IE9, you must import the excanvas.js file. Of course, the CSS file of jqplot must also be imported at the same time. The code is as follows:

Copy code The code is as follows:

Add a plot container

We can add a container for jqplot on the page, such as a div, but it should be noted that the width and height must be specified for this div container, as shown in the following code:

Start creating the plot chart

Next we create it above Charts are generated and rendered in a good container by calling $.jqplot. For example, if you use the following data to initialize the jqplot chart:

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

The final display effect is as shown below:

jqplot attribute options
We can pass in some parameter options to customize jqplot when calling $.jqplot. Some parameter options are as follows:

Copy code The code is as follows:

 
seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12", 
"#953579", "#4b5de4 ", "#d8b83f", "#ff5800", "#0085cc"], // The default displayed category color. If the number of categories exceeds the number of colors here, 
// From the first position in the queue Start re-assigning values ​​to the corresponding categories 
stackSeries: false, // If set to true and there are multiple categories (if it is a line chart, there must be more than one polyline), then each category (line) 
//The value on the vertical axis is the sum of the vertical axis values ​​of all previous categories and the sum of its vertical and horizontal axis values ​​
title: '', //Set the title of the current picture 
title: { 
 text: '', //Set the title of the current picture 
show: true, //Set whether the title of the current picture is displayed 
}, 
axesDefaults: { 
show: false, whether to automatically display coordinates axis. 
min: null, the minimum scale value of the horizontal (vertical) axis 
max: null, the maximum scale value of the horizontal (vertical) axis 
pad: 1.2, the increase factor of the horizontal (vertical) axis scale value 
 ticks: [], //Set the value on the horizontal (vertical) coordinate scale, which can be the value in the ticks array
numberTicks: undefined,//A 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, // Set the renderer for loading data on the horizontal (vertical) axis
rendererOptions: {}, // Set the Option configuration object of the renderer. Line graphs do not need to be set. 
tickOptions: { 
mark: 'outside', // Set the display mode of the scale on the coordinate axis: minutes They are: coordinate axis outer display, inner display, and through display; their values ​​are 'outside', 'inside' or 'cross' respectively.
showMark: true, //Set whether to display the scale
showGridline: true, // Whether to display the grid in the direction of the scale value in the chart area
markSize: 4, //The distance between each tick mark vertex and the tick mark The distance between points on the coordinate axis (in pixels). If the mark value is 'cross', then each tick mark has an upper vertex and a lower vertex. The tick mark intersects with the coordinate axis 
 in the middle of the tick mark, then this Distance×2 
show: true, //Whether to display tick marks, grid lines in the same direction as the tick marks, and scale values ​​on the coordinate axis
showLabel: true, //Whether to display tick marks and coordinate axes The scale value on the axis
formatString: '', //Set the display format of the scale value on the coordinate axis, eg:'%b %#d, %Y' means the format "month, day, year", "AUG 30,2008" 
fontSize:'10px', //The font size of the scale value
fontFamily:'Tahoma', //The font on the scale value
angle:40, //The angle between the scale value and the coordinate axis, the angle is Positive clockwise direction of the coordinate axis
fontWeight:'normal', //The thickness of the font
fontStretch:1//The degree of stretch (stretch) of the scale value in the direction (outside the coordinate axis)
 } 
showTicks: true, //Whether to display tick marks and scale values ​​on the coordinate axis, 
showTickMarks: true, //Set whether to display ticks
useSeriesColor: true //If there are multiple vertical (horizontal) ) coordinate axes, use this property to set whether these coordinate 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 set the common attributes of each category through this configuration attribute 
show: true, //Set whether to render the entire Chart area (that is, displaying the content in the chart). 
xaxis: 'xaxis', // either 'xaxis' or 'x2axis'. 
yaxis: 'yaxis', // either 'yaxis' or 'y2axis'. 
label: '', // The category name used to display in the category name box. 
color: '', // The color of the category represented in the icon (discount, histogram, etc.). 
lineWidth: 2.5, // What is the width of classification charts (especially line charts). 
shadow: true, // Whether each chart displays a shadow area in the chart. 
shadowAngle: 45, // Same as in grid Parameters. 
shadowOffset: 1.25, //Refer to the same parameters in the grid. 
shadowDepth: 3, //Refer to the same parameters in the grid. 
shadowAlpha: 0.1, // Opacity of the shadow. 
showLine : true, //Whether to display the polyline in the chart (polyline in the line chart) 
showMarker: true, // Whether to highlight the data nodes in the graph
fill: false, // Whether to fill under the polyline in the chart area (the fill color is the same as the polyline color) and the color of the category in the category name box set by legend 
//It should be noted here that if fill is true, 
//then showLine must be true, otherwise it will not Display effect
fillAndStroke: false, //When fill is true, a line is displayed at the top of the filled area (if it is a line chart, the line is displayed) 
fillColor: undefined, //Set the fill area Color
fillAlpha: undefined, // Set the transparency of the filled area
renderer: $.jqplot.PieRenderer, // Use the renderer (here, the pie chart PieRenderer is used) to render the existing chart
//, Thus converted into the required chart 
rendererOptions: {}, // Pass the option object of the renderer set by the previous attribute. The renderer of the line chart does not have an option object. 
 // Option configuration objects of different charts Please refer to the following "Option object settings of different jqPlot plug-ins" 
//Configuration Option objects of each chart 
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', // The way each data point is displayed in the graph, the default is "filledCircle "(solid circle), 
//Several other methods circle, diamond, square, filledCircle, 
// filledDiamond or filledSquare. 
lineWidth: 2, // The width of each side of the data point ( If the setting is too large, each edge will be repeated and the display will be similar to a solid point) 
size: 9, // The size of the data point 
color: '#666666' // The color of the data point 
shadow : true, // Whether to display shadow area for data points (increase three-dimensional effect) 
shadowAngle: 45, // Shadow area angle, x-axis clockwise direction
shadowOffset: 1, // Refer to the same parameters in grid
shadowDepth: 3, //Refer to the same parameters in the grid
shadowAlpha: 0.07 //Refer to the same parameters in the grid
} 
isDragable: true, //Whether dragging is allowed (if the dragable package has been introduced) , draggable by default 
}, 
series:[ 
//If there are multiple categories that need to be displayed, set the relevant configuration properties of each category here 
//eg. Set each category Category name in the category name box 
//[label: 'Traps Division'},{label: 'Decoy Division'},{label: 'Harmony Division'}]//Configuration parameter settings are the same as seriesDefaults 
], 
legend: { 
show: false,//Set whether the category name box appears (that is, the names of all categories appear at a certain position in the picture) 
location: 'ne', // The location where the category name box appears, nw, n, ne, e, se, s, sw, w. 
xoffset: 12, // The distance between the category name box and the upper border of 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 distance between the category name box and the background color of the chart area
textColor:' ' // font color within the chart area within the category name box distance 
}, 
grid: { 
drawGridLines: true, // wether to draw lines across the grid or not. 
gridLineColor: '#cccccc ' // Set the color of the grid background line of the entire icon area 
background: '#fffdf6', // Set the background color of the entire chart area 
borderColor: '#999999', // Set the (outermost) of the chart ) border color
borderWidth: 2.0, //Set the width of the (outermost) border of the chart
shadow: true, //Set a shadow for the entire icon (outermost) border to highlight its three-dimensional effect
 shadowAngle: 45, // Set the angle of the shadow area, rotate clockwise from the x-axis 
shadowOffset: 1.5, // Set the offset distance of the shadow area from the picture border 
shadowWidth: 3, // Set the shadow area The width of 
shadowDepth: 3, // Set the number of overlapping shadows in the audio and video area 
shadowAlpha: 0.07 // Set 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 objects of different jqPlot plug-ins Settings
//BarRenderer (setting the Option object of the histogram) 
//This Option object applies to the configuration object settings related to the series and seriesDefault properties of the histogram 
seriesDefaults: { 
rendererOptions: { 
barPadding: 8, //Set the distance (px) between two columnar bars of the same category 
barMargin: 10, //Set the distance (px) between two columnar bars of different categories (same horizontal coordinate table point) 
barDirection: 'vertical', //Set the direction of the histogram display: vertical display and horizontal display 
//, the default vertical display is vertical or horizontal. 
barWidth: null, // Set the width of each column bar in the histogram 
shadowOffset: 2, // Same attribute settings as grid 
shadowDepth: 5, // Same attribute settings as grid 
shadowAlpha: 0.8, // Same as grid Attribute settings 
} 
}, 
// Cursor (cursor) 
// When the mouse moves to the image, the mouse will be displayed in the image. It is often used together with the highlight function 
 //In addition, drill into a certain area in the picture (zoom in on the selected area) by setting the zoom-related properties of this property. 
//This configuration object is configured directly under option 
cursor: { 
 style: 'crosshair', //When the mouse moves over the picture, the display style of the mouse. The attribute value is the css class
show: true, //Whether to display the cursor
showTooltip: true, // Whether to display it Prompt information bar
followMouse: false, //Whether the cursor prompt information bar moves with the cursor (mouse)
tooltipLocation: 'se', //Set the position of the cursor prompt information bar. If followMouse=true, then the position is 
//The position of the prompt information bar relative to the cursor.Otherwise, prompt the position of the information bar in the icon for the cursor 
// Optional values ​​for this attribute: n, ne, e, se, etc. 
tooltipOffset: 6, //The distance between the prompt information bar and the mouse (followMouse= true) or the position of the coordinate axis (followMouse=false) 
showTooltipGridPosition: false, // Whether to display the cursor position in the information prompt bar (based on the pixel distance between the left and upper edges of the icon) 
showTooltipUnitPosition: true, // Whether to display an information bar that prompts the position of the cursor (take its data value on the horizontal and vertical axes) 
 // Note: Note the difference between this and the showTooltipGridPosition value. The former displays the coordinate value, and the data value is displayed there
tooltipFormatString: '%.4P', // Same as Highlighter's tooltipFormatString 
useAxesFormatters: true, // Same as Highlighter's tooltipFormatString 
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 (drag) 
//This configuration object is configured through seriesDefaults and series configuration objects 
seriesDefaults: { 
dragable: { 
color: undefined, / / When dragging a data point, the drag line and drag data point color 
constrainTo: 'none', //Set the dragging range: 'x' (can only be dragged horizontally), 
// 'y' (can only be dragged vertically), or 'none' (unlimited). 
}, 
}, 
// Highlighter (highlight) 
// Set the highlight action option attribute object
//When the mouse moves to a certain data point, the data point increases and a prompt message box is displayed
//The configuration object is directly configured under the option
highlighter: { 
lineWidthAdjust: 2.5, //When the mouse moves over the enlarged data point, set the width of the enlarged data point
// Currently only applicable to non-solid data points
sizeAdjust: 5, / / When the mouse moves to the data point, the increment of the data point expansion
showTooltip: true, // Whether to display the prompt information bar
tooltipLocation: 'nw', // The prompt information display position (English direction) initial letter): n, ne, e, se, s, sw, w, nw. 
fadeTooltip: true, // Set the way the prompt information bar appears and disappears (whether to fade in or out) 
tooltipFadeSpeed: "fast"//Set the fade-in and fade-out speed of the prompt information bar: slow, def, fast, or a value in milliseconds. 
tooltipOffset: 2, // The offset of the highlighted data point in the prompt information bar Shift position, in pixels. 
tooltipAxes: 'both', // The prompt information box displays the value on the coordinate axis of the data point. There are currently three modes: horizontal/vertical/horizontal and vertical. 
//The values ​​are x, y or xy. 
tooltipSeparator: ', ' // The separation symbol between different values ​​in the prompt information bar 
useAxesFormatters: true // The format for displaying data in the prompt information box Is it consistent with the display format of the data on the coordinate axis? 
tooltipFormatString: '%.5P' // Used to set the format of data display in the prompt information box, the prerequisite is useAxesFormatters 
// is false. At this time the information The data format in the prompt box is no longer consistent with the coordinate axis, but is based on this
//At the same time, this attribute also supports html format strings
//eg:'< ;span style="color:red;" mce_style="color:red;">hello %.2f' 
}, 
// LogAxisRenderer (Exponential renderer) 
// This renderer has only two properties. The exponential renderer is configured through axesDefaults and axes configuration objects 
axesDefaults: { 
base: 10, // The base of the exponent
 tickDistribution: 'even', // Coordinate axis display mode: 'even' or 'power'. 'even' produces coordinate tick values ​​evenly distributed on the coordinate 
 // axis.And 'power' determines the scale on the coordinate axis based on the increasing increment 
}, 
// PieRenderer (sets the OPtion object of the pie chart) 
// The pie chart passes seriesDefaults Configure with the series configuration object 
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 Distance, disguised as the diameter of the pie
sliceMargin: 20, // The distance between each part of the pie
fill:true, // Set the filled state of each part of the pie
shadow:true , //Set a shadow for the border of each part of the pie to highlight its three-dimensional effect
shadowOffset: 2, //Set the shadow area offset from the border of each part of the pie
shadowDepth: 5, // Set the depth of the shadow area 
shadowAlpha: 0.07 // Set the transparency of the shadow area 
} 
}, 
//pointLabels (data point labels) 
//Used to position the data points Display relevant information (not a prompt box) 
seriesDefaults: { 
pointLabels: { 
location:'s',//Data labels display the location near the data point
ypadding:2 //Data The distance between the label and the data point in the vertical axis direction 
} 
} 
// Trendline (trend line) 
// The pie chart is configured through seriesDefaults and series configuration objects 
seriesDefaults: { 
trendline: { 
show: true, // Whether to display the trend line
color: '#666666', // Trend line color
label: '', // Trend line name
type: 'linear', //Trend line type 'linear' (straight line), 'exponential' (power value line) or 'exp' 
shadow: true, // Same attribute settings as grid
lineWidth : 1.5, // Trend line width
shadowAngle: 45, // Same attribute settings as grid
shadowOffset: 1.5, // Same attribute settings as grid
shadowDepth: 3, // Same attribute settings as grid 
shadowAlpha: 0.07 // Same attribute settings as grid 
} 
} 
} 

Here is an example of using custom parameters:

Copy code The 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'}] 
}); 

The display effect is as shown below: