Brief Introduction
Jqplot is a very good jquery based graphics plug-in, this article mainly helps you to organize the Jqplot Chinese usage instructions and online samples and source download. The Jqplot plug-in will render a chart on the canvas in a browser that supports HTML5.
Introducing script Files
Jqplot needs 1.4.3 of jquery version support, just said, Jqplot in support HTML5 Canvas browser will be presented in canvas, otherwise, If you are introducing the Excanvas.js file in the IE9 version of the browser, of course, Jqplot CSS files should be introduced at the same time, the following code:
Copy Code code 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 to specify a good height for the div container, the following code:
<div id= "Chartdiv" style= "height:400px;width:300px; "></div>
Start creating plot chart
Next we implement the graph generation and rendering by calling $.jqplot in the container we created above, such as initializing the Jqplot chart with the following data:
$.jqplot (' Chartdiv ', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]];
The final display effect is shown in the following illustration:
Jqplot Property Options
When we call $.jqplot, we can pass in some parameters. Options come from the definition of jqplot, and some of the parameters options are as follows:
Copy Code code as follows:
Seriescolors: ["#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
"#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"],///default display category color, if the number of categories exceeds the number of colors here,
From the first position in the queue, the value is assigned to the appropriate category
Stackseries:false,//If set to True and has multiple categories (if it is a line chart, you must have more than one polyline), then each category (Polyline)
The value on the vertical axis is the sum of all the longitudinal axis values of the previous category and the value of the axis value added
Title: ',//Set the caption of the current diagram
Title: {
Text: ',//Set the title of the current diagram
show:true,//sets whether the current diagram's caption is displayed
},
Axesdefaults: {
Show:false, whether the axes are automatically displayed.
Min:null, horizontal (longitudinal) axis Minimum scale value
Max:null, transverse (longitudinal) axis Maximum scale value
pad:1.2, transverse (longitudinal) axis degree value increase factor
Ticks: [],//Set the value on the scale of the horizontal (vertical) coordinate, which can be the value in the Ticks array
numberticks:undefined,//a division factor that sets the horizontal (vertical) Coordinate scale interval, the horizontal (vertical) coordinate tick interval value = horizontal (longitudinal) coordinate interval length/(numberTicks-1)
Renderer: $.jqplot. Linearaxisrenderer,//Set the renderer on the horizontal (vertical) axis data loading
Rendereroptions: {},//SET option Configuration object for renderer, line chart does not need to be set
Tickoptions: {
Mark: ' Outside ',//Set the scale on the axis display mode: Divided into: Axis display, inside display, and through the display, the value is ' outside ', ' inside ' or ' cross '.
Showmark:true,//Set whether the scale is displayed
Showgridline:true,//whether to display a grid of tick-value orientation in the chart area
Marksize:4,//tick-mark vertices distance (in pixels) from the tick marks on the axis if the mark value is ' Cross ', then each tick line has top and bottom vertices, tick marks, and axes.
Cross in the middle of tick marks, then this distance x2
Show:true,//whether to display tick marks, grid lines in the same direction as tick marks, and tick values on axes
Showlabel:true,//whether to display tick marks and tick values on the axis
FormatString: ',//Set scale value display format on axis, eg: '%b% #d,%Y ' means ' format ' Month day, Year ', ' AUG 30,2008 '
FontSize: ' 10px ',//scale value font size
fontFamily: ' Tahoma ',//scale value font
ANGLE:40,//tick value and axis angle, angle axis clockwise direction
FontWeight: ' normal ',//font weight
The extent (stretching) of the fontstretch:1//tick value in the direction (outside the axis)
}
Showticks:true,//whether to display tick marks and tick values on the axis,
Showtickmarks:true,//Set whether the scale is displayed
Useseriescolor:true//If you have more than one vertical (horizontal) axis, set these axes to appear in different colors by using this property
},
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 classifications, this allows you to set the common properties of each category through the configuration property
Show:true,//sets whether to render the entire chart area (that is, to display the contents of the chart).
Xaxis: ' Xaxis ',//either ' Xaxis ' or ' x2axis '.
YAxis: ' YAxis ',//either ' YAxis ' or ' y2axis '.
Label: ',//the category name to display in the Category name box.
Color: ',///The colour of the category in the icon (fold, histogram, etc.).
linewidth:2.5,//category chart (especially line chart) which width.
Shadow:true,//each diagram shows shaded areas in the chart.
SHADOWANGLE:45,//reference grid in the same parameters.
shadowoffset:1.25,//reference grid in the same parameters.
Shadowdepth:3,//reference grid in the same parameters.
shadowalpha:0.1,//Opacity of the shadow.
Showline:true,//whether to display a polyline in a chart (a polyline in a line chart)
Showmarker:true,//whether to emphasize the data nodes in the display diagram
Fill:false,//whether to populate the area below the polyline in the chart (fill color with polyline color) and legend
Set the color of the category in the Category name box, note here that if fill is true,
Then the showline must be true, otherwise the effect will not be displayed
Fillandstroke:false,///in state with fill to true, displays a line at the top of the fill area (if it is a line chart that shows the polyline)
fillcolor:undefined,//Set the color of the fill area
fillalpha:undefined,//stiles The transparency of the fill area
Renderer: $.jqplot. Pierenderer,//render an existing chart using a renderer (here is a pie chart pierenderer)
, and then convert to the diagram you want
Rendereroptions: {},//The option object that is passed to the renderer set by the previous property, the renderer for the line graph has no option object,
Option configuration objects for different graphs see the Option object settings for the Jqplot various plug-ins below
Configure option objects 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 diagram
Style: ' filledcircle ',//the way each data point is displayed in the diagram, the default is "Filledcircle" (Solid dot),
Several other ways Circle,diamond, square, Filledcircle,
Filleddiamond or Filledsquare.
Linewidth:2,//Count the width of each edge of the position (if set too large, each side will repeat, will appear similar to a solid point)
Size:9,//number of positions size
Color: ' #666666 '//number of colors in a stronghold
Shadow:true,//whether the shaded area is displayed for the data point (increase stereo effect)
SHADOWANGLE:45,//shaded area angle, x-axis clockwise direction
Shadowoffset:1,//reference grid in the same parameters
Shadowdepth:3,//reference grid in the same parameters
shadowalpha:0.07//reference grid in the same parameters
}
isdragable:true,//whether to allow drag (if Dragable package is introduced), drag by default
},
series:[
If there are multiple categories that need to be displayed, this sets the related configuration properties for each category here
eg. set the category name of each category in the Category name box
[Label: ' Traps Division '},{label: ' Decoy Division '},{label: ' Harmony division '}]//config parameter set with Seriesdefaults
],
Legend: {
show:false,//whether the Category name box appears (that is, the name of all categories appears somewhere in the diagram)
Location: ' NE ',//Category name box appears position, NW, N, NE, E, SE, S, SW, W.
Xoffset:12,//Category name box distance from top border of chart area (px)
Yoffset:12,//Category name box distance from the left border of the chart area (px)
Background: '//Category name box from chart area background color
TextColor: '//Category name box from chart area font Color
},
Grid: {
Drawgridlines:true,//wether to draw lines across the grid or not.
GridlineColor: ' #cccccc '//Set the color of the entire icon area grid background line
Background: ' #fffdf6 ',//Set the background color of the entire chart area
BorderColor: ' #999999 ',//Set the color of the (most outer) border of the chart
borderwidth:2.0,//Set the border width of the chart (most outside)
Shadow:true,//sets a shadow over the entire icon (most outer) border to highlight its stereo effect
SHADOWANGLE:45,//Set angle of shaded area, rotate clockwise from X axis
shadowoffset:1.5,//Set the distance from the shadow area to the border of the picture
Shadowwidth:3,//set width of shaded area
Shadowdepth:3,//Set number of overlapping shadows for AV area
shadowalpha:0.07//Set the opacity of the shaded area
Renderer: $.jqplot. Canvasgridrenderer,//renderer to the draw the grid.
Rendereroptions: {}//options to the renderer. Note, the default
Canvasgridrenderer takes no additional options.
},
Jqplot option object settings for each different plug-in
Barrenderer (Option object to set bar chart)
The option object is applicable to the configuration object settings associated with the series and Seriesdefault properties of the column graph
Seriesdefaults: {
Rendereroptions: {
Barpadding:8,//set distance between two bars of the same category (PX)
Barmargin:10,//Set distance (px) between two bars of different classification (same coordinate table point)
Bardirection: ' Vertical ',//Set bar chart Display direction: Vertical display and horizontal display
, the default vertical display is vertical or horizontal.
Barwidth:null,//Set the width of each column in the bar chart
Shadowoffset:2,//Same as grid property settings
Shadowdepth:5,//Same as grid property settings
shadowalpha:0.8,//Same as grid property settings
}
},
Cursor (cursor)
When the mouse is moved to the diagram, the mouse is displayed in the diagram, and is often used in conjunction with the highlighting function.
In addition, drill through a region of the diagram by setting the zoom-related property of the property (zoom in on the selected area)
This configuration object is configured directly under option
Cursor: {
Style: ' crosshair ',//When the mouse is moved to the picture, the mouse display style, the property value is the CSS class
Show:true,//whether to show the cursor
Showtooltip:true,//whether to display the prompt Information Bar
Followmouse:false,///cursor prompt Information Bar to move with cursor (mouse)
Tooltiplocation: ' SE ',///cursor Tip Information Bar position settings. If followmouse=true, then the location is
The position of the hint InfoBar relative to the cursor. Otherwise, the position of the cursor tip Information Bar in the icon
Optional value for this attribute: N, NE, E, se, etc.
Tooltipoffset:6,//hint info The position of the mouse (followmouse=true) or axis (Followmouse=false)
showtooltipgridposition:false,//whether to display the cursor position in the InfoBar (take the pixel distance from the left and top edge lines of the icon)
showtooltipunitposition:true,//whether to display the InfoBar where the prompt cursor is located (the data value on the vertical axis)
Note: Note that this is distinguished from the showtooltipgridposition value, which displays the coordinate value, where the data value is displayed
Tooltipformatstring: '%.4p ',//tooltipformatstring with highlighter
Useaxesformatters:true,//tooltipformatstring with highlighter
Tooltipaxesgroups: [],//show only specified axes groups in ToolTip. Would Specify like:
[[' Xaxis ', ' YAxis '], [' Xaxis ', ' Y2axis ']]. By default, all axes
Combinations 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 data points is, drag the line and drag the data point color
Constrainto: ' None ',//set the range of the drag: ' X ' (can only be dragged horizontally),
' Y ' (can only be dragged vertically), or ' none ' (unrestricted).
},
},
Highlighter (highlight)
Set Highlight Action Option Property object
When you move the mouse over a data point, the data point grows and the message box appears
This configuration object is configured directly under option
Highlighter: {
linewidthadjust:2.5,///When the mouse is moved to an enlarged data point, set the width of the enlarged data point
Currently available only for non-solid data points
Sizeadjust:5,//When the mouse moves to the data point, the increment increment of the data point
Showtooltip:true,//whether to display the prompt Information Bar
Tooltiplocation: ' NW ',//hint info display position (first letter in English direction): N, NE, E, SE, S, SW, W, NW.
Fadetooltip:true,//Set the way the prompt Information bar appears and disappears (fade in)
Tooltipfadespeed: "Fast"//Set the speed of the hint InfoBar fade: Slow, Def, fast, or a number of milliseconds.
Tooltipoffset:2,//The Tip InfoBar is offset by the highlighted data points in pixels.
Tooltipaxes: ' Both ',//Cue message box displays the value on that axis of the data point, there are currently three ways of horizontal/vertical/horizontal longitudinal.
Values are x, y, or XY respectively.
Tooltipseparator: ', '//cue infobar between different values of the spacing symbol
Whether the data in the Useaxesformatters:true//Hint box is displayed in the same format as the data on the axis
Tooltipformatstring: '%.5p '//for setting the format of the data display in the Hint message box, provided that the Useaxesformatters
to False. The data format is no longer consistent with the axes of the information balloon, but is the
At the same time, the property also supports HTML format strings
Eg: ' <b><i><span style= ' color:red; "mce_style=" color:red; " >hello</span></i></b>%.2f '
},
Logaxisrenderer (exponential renderer)
The renderer has only two properties, and the exponential renderer is configured with Axesdefaults and axes configuration objects
Axesdefaults: {
Base:10,//index base
Tickdistribution: ' Even ',//Axis display mode: ' Even ' or ' power '. The ' even ' produces a uniform distribution of coordinates.
The value of the coordinate scale on the axis. and ' power ' determines the scale on the axis based on the increasing number of increases
},
Pierenderer (Option object to set pie chart)
Pie charts are configured with Seriesdefaults and series configuration objects
Seriesdefaults: {
Rendereroptions: {
diameter:undefined,//Set the diameter of the pie
PADDING:20,//pie distance from its category name box or chart border, the diameter of the table cake in disguise
SLICEMARGIN:20,//the distance between each part of the pie
Fill:true,//Set the status of each part of the pie to be filled
Shadow:true,//sets the shadow of the border of each part of the pie to highlight its stereo effect
Shadowoffset:2,//sets the distance from the shadow area to the border of each part of the pie
Shadowdepth:5,//set depth of shaded area
shadowalpha:0.07//Set the opacity of the shaded area
}
},
Pointlabels (data point label)
Use to display related information at the location of the data point (non-prompt Box nature)
Seriesdefaults: {
Pointlabels: {
Location: ' s ',//data label displayed near data point location
Ypadding:2//Data label distance from the data point in the direction of the longitudinal axis
}
}
Trendline (trend line)
Pie charts are configured with Seriesdefaults and series configuration objects
Seriesdefaults: {
Trendline: {
Show:true,//whether to show the trend line
Color: ' #666666 ',//trend line Colors
Label: ',//Trend line Name
Type: ' linear ',//trendline type ' linear ' (straight line), ' exponential ' (Power number line) or ' exp '
Shadow:true,//Same as grid property settings
linewidth:1.5,//Trend line width
SHADOWANGLE:45,//Same as grid property settings
shadowoffset:1.5,//Same as grid property settings
Shadowdepth:3,//Same as grid property settings
shadowalpha:0.07//Same as grid property settings
}
}
}
Here's an example of using a custom parameter:
Copy Code code 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 shown in the following illustration:
SOURCE Download http://www.jb51.net/jiaoben/35457.html
Its official website: http://www.jqplot.com/.
