I also talked about a graphical report based on Java before. The function and appearance are also good, but there are problems with versatility. So let's learn a js chart plug-in with ease of use, compatibility and extensibility.
jqPlot is an icon drawing plug-in based on the jquery class library. Through jqPlot, you can draw linear, columnar, pie and other styles of charts on web pages. Moreover, jqPlot has plug-in extensibility (Pluggability), and you can write your own chart style.
Official address: http://www.jqplot.com/
Function overview:
A variety of chart styles are available
You can customize the date axis
You can set the rotation axis text
Automatically calculate trend lines
Toolbar tips and highlighted data points
Default optimal settings, very easy to use
The above functions are in jqPlot The example pages on the homepage have many visual representations. Here is its detailed usage documentation.
Disadvantages: Histogram cannot display specific data values. Pie charts cannot show specific percentages.
The following is the detailed parameter configuration collected:
options =
{
seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
"#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // The default display color of the category,
//If the number of categories exceeds the number of colors here, Then start from the first position in the queue and assign the value to the corresponding category
stackSeries: false, // If set to true and there are multiple categories (if it is a line chart, there must be more than one line),
//Then the value of each category (polyline) on the vertical axis is the sum of the vertical axis values of all previous categories and the sum of its vertical
//axis values (eg, the current category vertical axis value is Y3
//, with Y2 and Y1 in front of it, then the value displayed on the Y axis is Y2 Y3 Y1. Currently, this attribute supports line graphs and bar graphs
title: '', //Set the title of the current graph
title: {
text: '', //Set the title of the current figure
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 by the horizontal (vertical) coordinate
max: null, // The maximum value displayed by the horizontal (vertical) coordinate Value
pad: 1.2, // A multiplication factor,
//(the maximum value of the data on the horizontal (vertical) axis - the minimum value of the data on the horizontal (vertical) axis) * pad value = the axis display The length of the horizontal (vertical) coordinate interval
// The length of the horizontal (vertical) coordinate interval displayed on this axis = the maximum value displayed by the horizontal (vertical) coordinate - the minimum value displayed by the horizontal (vertical) coordinate
// If If the values of max and min are set, the values set by min and max will be given priority
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, 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 interval length ) Coordinate scale interval value, which can be a date string
renderer: $.jqplot.LinearAxisRenderer, // Set the renderer for loading data on the horizontal (vertical) axis, including dateAxisRenderer (see the relevant introduction at the end of this article).
rendererOptions: {}, // Set the Option configuration object of the renderer. Line charts do not need to be set.
// For the Option configuration objects of different charts, please refer to the following "Option Object Settings of Different Plugins for jqPlot"
//Configuration Option objects for each chart in
tickOptions: {
mark: 'outside', // Set the horizontal (vertical) coordinate scale display mode on the coordinate axis, which is divided into inside, outside, and through the coordinate axis Coordinate axis display
// Values are also divided into: 'outside', 'inside' and 'cross',
showMark: true, //Set whether to display scales
showGridLine: true, // Whether in the chart The area displays the grid lines in the direction of the scale value
markSize: 4, //The distance between each tick mark vertex and the point on the coordinate axis (in pixels)
//If the mark value is 'cross', Then each tick mark has an upper vertex and a lower vertex, and the tick mark intersects with the coordinate axis
//in the middle of the tick mark, then the distance is ×2,
show: true, // Whether to display the tick mark , grid lines in the same direction as the tick marks, and the scale values on the coordinate axis
showLabel: true, // Whether to display the tick marks and the scale values on the coordinate axis
formatString: '', // Set The scale value display format on the coordinate axis, eg:'%b %#d, %Y' represents the format "month, day, year", "AUG 30,2008"
fontSize:'10px', //The font of the scale value Size
fontFamily:'Tahoma', //Font on the scale value
angle:40, //The angle between the scale value and the coordinate axis, the angle is the positive and 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 the tick value on the coordinate axis
showTickMarks: true, //Set whether to display the tick mark
useSeriesColor: true //If there are multiple vertical (horizontal) coordinate axes, use this property to set whether these coordinate axes are in different colors Display
},
axes: {
xaxis: {
// The settings are the same as axisDefaults
},
yaxis: {
// The settings are the same as axisDefaults
},
x2axis: {
// The settings are the same as axisDefaults
},
y2axis: {
// The settings are the same as axisDefaults
}
},
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 (i.e. display the content in the chart)
xaxis : 'xaxis', // either 'xaxis' or 'x2axis'.
yaxis: 'yaxis', // either 'yaxis' or 'y2axis'.
label: '', // used to display in The category name in the category name box
color: '', // The color of the category represented in the icon (discount, bar chart, etc.)
lineWidth: 2.5, // Where does the category chart (especially the line chart) Width
shadow: true, // Whether each graph displays a shadow area in the chart
shadowAngle: 45, // Refer to the same parameters in the grid
shadowOffset: 1.25, // Refer to the same parameters in the grid
shadowDepth: 3, //Refer to the same parameters in the grid
shadowAlpha: 0.1, //Refer to the same parameters in the grid
showLine: true, //Whether to display the polyline in the chart (the polyline in the line chart)
showMarker: true, // Whether to highlight the data nodes in the chart
fill: false, // Whether to fill the area under the polyline in the chart (the fill color is the same as the polyline color) and the category name box set by legend
// The color of the classification. Note here that if fill is true,
//then showLine must be true, otherwise the effect will not be displayed
fillAndStroke: false, //When fill is true, fill A line is displayed at the top of the area (if it is a line chart, the line is displayed)
fillColor: undefined, // Set the color of the filled area
fillAlpha: undefined, // Set the transparency of the filled area
renderer: $.jqplot.PieRenderer, // Use the renderer (here, pie chart PieRenderer) to render the existing chart
//, thus converting it into the required chart
rendererOptions: {}, // Pass to the previous property The option object of the set renderer. The renderer of the line chart does not have an option object.
//For the Option configuration objects of different charts, please refer to the following "Option Object Settings of Different Plug-ins for jqPlot"
//Each chart in Configuration Option object
markerRenderer: $.jqplot.MarkerRenderer, // renderer to use to draw the data
// point markers.
markerOptions: {
show: true, // Whether in the figure Display data points in
style: 'filledCircle', // The way each data point is displayed in the graph, the default is "filledCircle" (solid circle),
//Several other ways circle, diamond, square , filledCircle,
// filledDiamond or filledSquare.
lineWidth: 2, // The width of each side of the data point (if set too large, each side 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 the shadow area for the data point (increase the three-dimensional effect)
shadowAngle : 45, // Angle of shadow area, clockwise direction of x-axis
shadowOffset: 1, // Refer to the same parameters in the grid
shadowDepth: 3, // Refer to the same parameters in the grid
shadowAlpha: 0.07 // Refer to the same parameters in grid
}
isDragable: true, //Whether drag 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 the category name of each category 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 location 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 Distance from 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:'' //The distance between the category name box and the font color within the chart area
.. For other information about style design, please refer to the official documents
},
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) border of the chart 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 width of the shadow area
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 object settings for different plug-ins of jqPlot************************ **********/
//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 between two columnar bars of the same category (px)
barMargin: 10, //Set the distance (px) between two columnar bars of different categories (same as On an abscissa table point)
barDirection: 'vertical', //Set the direction of the bar chart 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 Same attribute settings for grid
}
},
// Cursor (cursor)
// When the mouse moves to the picture, the mouse will display in the picture, often with the highlight function At the same time, use
//In addition, drill into a certain area in the picture (zoom in on the selected area) by setting the zoom-related attribute of this attribute.
//The 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 the prompt information bar
followMouse: false, // Whether the cursor prompt information bar moves with the cursor (mouse)
tooltipLocation: 'se', // The position of the cursor prompt information bar set up. 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 color of the drag line and the dragged data point
constrainTo: 'none', //Set the dragging range: 'x' (only in the horizontal direction drag),
// 'y' (can only be dragged vertically), or 'none' (no limit).
},
},
// 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 under the option Configuration
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 over the data point, the increment of the data point expansion
showTooltip: true, // Whether to display the prompt information bar
tooltipLocation: 'nw', // Prompt Information display position (initial letter in English direction): n, ne, e, se, s, sw, w, nw.
fadeTooltip: true, // Set the way the prompt information bar appears and disappears (whether to fade in and out) )
tooltipFadeSpeed: "fast"//Set the speed at which the prompt information bar fades in and out: slow, def, fast, or a value in milliseconds.
tooltipOffset: 2, // The prompt information bar is highlighted The offset position of the displayed data point, 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 index
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)
// Pie shape The graph is configured through seriesDefaults and series configuration objects
seriesDefaults: {
rendererOptions: {
diameter: undefined, // Set the diameter of the pie
padding: 20, // The distance between the pie and its classification The distance between the name box or chart border, disguised as the diameter of the table 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 distance by which the shadow area is 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 display relevant information at the location of the data point (not a prompt box)
seriesDefaults: {
pointLabels: {
location:'s',//The position of the data label displayed near the data point
ypadding:2 //The distance between the data label and the data point in the vertical axis direction
}
}
// Trendline (trend line)
// Pie chart passed Configure 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 property settings as grid
lineWidth: 1.5, // Trend line width
shadowAngle: 45, // Same property settings as grid
shadowOffset: 1.5, // Same properties as grid Set
shadowDepth: 3, // Same attribute settings as grid
shadowAlpha: 0.07 // Same attribute settings as grid
}
}
}
Behind I will explain its usage and simple examples.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
