Also mentioned in front of a Java-based graphical report, function and appearance is also good, but there are problems of universality. So let's learn a JS chart plugin with ease of Use + compatibility + scalability.
Jqplot is an icon drawing plug-in based on the jquery class library. The Jqplot can be used to draw lines, columns, and pie-like graphs in the Web page. Also, Jqplot has plug-in scalability (pluggability), and you can write your own chart style.
Official address: http://www.jqplot.com/
Feature Overview:
There are a variety of chart styles to choose from
You can customize the date axis
Axis text can be set
Automatically calculate trendlines
ToolTips and highlighted data points
Default optimal settings, very easy to use
The above features are visually displayed on the sample page in the Jqplot home page. Here is the detailed documentation for its use.
Disadvantage: Histogram cannot display specific data values. A pie chart cannot display a specific percentage.
Below is the detailed parameter configuration for the collection:
Copy Code code as follows:
Options =
{
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, the value is assigned from the first position in the queue to the appropriate category
Stackseries:false,//If set to true and has more than one category (if it is a line chart, it must be more than a polyline).
The value of each category (Polyline) on the vertical axis is the sum of all the longitudinal axis values of the preceding category and its longitudinal
The value of the axis value added (eg, the current classification longitudinal axis value is Y3
, whose front has the y2,y1, then he displays the value on the y-axis as Y2+y3+y1, which currently supports line and column graphs
Title: ',//Set the caption of the current diagram
Title: {
Text: ',//Set the title of the current diagram
show:true,//sets whether the current title is displayed
},
Axisdefaults: {
Show:false,//wether or not to renderer the axis. Determined automatically.
Min:null,//horizontal (vertical) coordinates display minimum value
Max:null,//horizontal (vertical) coordinates display maximum value
pad:1.2,//a multiplication factor,
(Data on horizontal (longitudinal) axis maximum value-data on the horizontal (vertical) axis minimum) *pad value = horizontal (vertical) coordinate interval length shown by the axis
The horizontal (longitudinal) coordinate interval length shown in this axis = The maximum value displayed by horizontal (vertical) coordinates-the minimum value shown by horizontal (vertical) coordinates
If the max and Min values are set, then the values of min and Max settings will be given precedence
Ticks: [],//Set the value on the scale of the horizontal (vertical) coordinate, which can be the value in the Ticks array,
A 1D [Val1, Val2, ...], or 2D [[Val, Label], [Val, label], ...]
numberticks:undefined,//a division factor for setting horizontal (vertical) coordinate scale intervals
Horizontal (vertical) coordinate scale interval value = horizontal (longitudinal) coordinate interval length/(numberTicks-1)
Tickinterval: ',//horizontal (vertical) coordinate tick interval value, can be a date string
Renderer: $.jqplot. Linearaxisrenderer,//Set up horizontal (vertical) axis data loading renderer, there are dateaxisrenderer (see the end of this article about).
Rendereroptions: {},//SET option Configuration object for renderer, line chart does not need to be set
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
Tickoptions: {
Mark: ' Outside ',//Set the horizontal (vertical) coordinate scale on the axis display mode, divided into the axis, outside, through the axis display
Values are also divided into: ' Outside ', ' inside ' and ' Cross ',
Showmark:true,//Set whether the scale is displayed
Showgridline:true,//whether to display grid lines in the chart area with tick value orientation
Marksize:4,//per tick-mark vertex distance (in pixels) from the tick mark on the axis
If mark value is ' Cross ', then each tick mark has top and bottom vertices, tick marks and axes
Cross in the middle of the tick mark, 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: ',///Stiles display format of tick value on axis, eg: '%b% #d,%Y ' expression 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: {
Set up the same axisdefaults
},
YAxis: {
Set up the same axisdefaults
},
X2axis: {
Set up the same axisdefaults
},
Y2axis: {
Set up the same axisdefaults
}
},
Seriesdefaults: {//If there are multiple classifications, this allows you to set the common properties of each category through the configuration property
Show:true,//Set whether to render the entire chart area (that is, 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 a category in an icon (folding, histogram, etc.)
linewidth:2.5,//category chart (especially line chart) which width
Shadow:true,//charts show 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,//reference grid in the same parameters
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 '}]
Configure parameter settings 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
.. Other official documents on style design reference
},
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 the option object settings for each of the different plug-ins ******************************/
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
}
}
}
I'll explain the usage and the simple examples behind.
