JqPlot jquery-Based Drawing plug-in

The front side also talked about a java-based graphical report with good functions and appearance, but there is a general problem. So we will learn a js chart plug-in with ease of use, compatibility, and scalability.

JqPlot is a jquery class library-based icon rendering plug-in. JqPlot allows you to draw various style charts, such as lines, histograms, and pie charts, on the webpage. In addition, jqPlot has plug-in scalability. You can write your own chart styles.

Official Address: http://www.jqplot.com/

Function Overview:

There are multiple chart styles to choose from
You can customize the date axis.
Rotation Axis text can be set
Automatically calculate the trend line
Toolbar tips and highlighted data points
Default optimal settings, very easy to use
The sample pages of the preceding functions on the jqPlot homepage are displayed visually. Here is its detailed usage document.

Disadvantage: the column chart cannot display specific data values. The percentage cannot be displayed in the pie chart.

The detailed parameter configurations collected are as follows:Copy codeThe Code is as follows: options =
{
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 has multiple categories (if it is a line chart, there must be more than one line chart ),
// The value of each category (line) on the vertical axis is the sum of the values of the vertical axis of all the previous categories and its vertical
// Add the value of the Axis value (for example, the vertical axis value of the current category is Y3)
//, Which has Y2 and Y1 before it. The value displayed on the Y axis is Y2 + Y3 + Y1. Currently, this attribute supports line charts and column charts.
Title: '', // set the title of the current Graph
Title :{
Text: '', // set the title of the current Graph
Show: true, // set whether the current title is displayed
},
AxisDefaults :{
Show: false, // wether or not to renderer the axis. Determined automatically.
Min: null, // the minimum value displayed in the horizontal (vertical) Coordinate
Max: null, // The maximum value displayed in the horizontal (vertical) Coordinate
Pad: 1.2, // a multiplication factor,
// (Maximum value of data on the horizontal (vertical) axis-minimum value of data on the horizontal (vertical) axis) * pad value = length of the horizontal (vertical) Coordinate interval displayed on the Axis
// Length of the horizontal (vertical) Coordinate range displayed for the Axis = maximum value displayed for the horizontal (vertical) coordinate-Minimum value displayed for the horizontal (vertical) Coordinate
// If the values of max and min are set, the values of min and max are given priority.
Ticks: [], // set the value on the scale of the horizontal (vertical) Coordinate, can be the value in the ticks array,
// A 1D [val1, val2,...], or 2D [[val, label], [val, label],...]
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)
TickInterval: '', // horizontal (vertical) coordinate scale interval value, which can be a date string
Renderer: $. jqplot. LinearAxisRenderer, // sets the renderer for data loading on the horizontal (vertical) axis, which has dateAxisRenderer (see the last section of this article ).
RendererOptions: {}, // set the Option configuration object of renderer. You do not need to set the line chart.
// For Option configuration objects for different charts, see Option object settings for different jqPlot plug-ins.
// Configure the Option object for each chart in
TickOptions :{
Mark: 'outside', // set the horizontal (vertical) coordinate scale display mode on the coordinate axis, which is divided into the inside and outside of the coordinate axis and displayed through the coordinate axis
// Values are also divided into: 'outside', 'Inside ', and 'cross ',
ShowMark: true, // you can specify whether to display the scale.
ShowGridLine: true, // whether to display grid lines in the direction of the scale value in the chart area
MarkSize: 4, // The distance between the vertices of each dial line and the dial line on the coordinate axis (in pixels)
// If the mark value is 'cross ', each dial line has the upper vertex and lower vertex, And the 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: '', // The display format of the scale value on the coordinate axis. For example, '% B % # d, % y' indicates the format of" 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 :{
// Set the same as axisDefaults
},
Yaxis :{
// Set the same as axisDefaults
},
X2axis :{
// Set the same as axisDefaults
},
Y2axis :{
// Set the same as axisDefaults
}
},

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 a category in the icon (discount, bar chart, etc.)
LineWidth: 2.5, // width of the category chart (especially the line chart)
Shadow: true, // whether the shadow area of each graph 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, // refer to the same parameters in grid
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 '}]
// Configure parameters with the same settings as 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.
. For more information about style design, see the official documentation.
},

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
}
}
}

I will explain the method and simple examples later.