May 09, 2021 Highcharts
1. Detailed description of Highcharts configuration options
2. Parameter configuration (property-event)
9. Series: Data column options
10.. plotOptions: Data point options
Highcharts offers a wide range of configuration option parameters that make it easy to customize user-compliant charts, and this section details instructions for using Highcharts configuration options:
chart.events.addSeries: Add a number of columns to the chart.
chart.events.click: Click events that occur in the plot area of the entire chart.
chart.events.load: Chart load events.
chart.events.redraw: Chart redraw events that can be triggered when you click on the caption to display and hide the drawing.
chart.events.selection: When the chart curve can be selected to zoom in, the event can be triggered when the chart action is selected.
chart.height: The height value of the chart drawn.
chart.inverted: x, y-axis pair in the chart.
chart.polar: Whether it is a polarity chart.
chart.reflow: When the window size changes, the chart width adaptive window size changes.
Chart.renderTo: Where the chart is loaded is a DOM object on the page.
chart.showAxes: In a blank chart, whether axes are displayed.
chart.type: the type of chart, the default is line, and bar/column/pie...
chart.width: The width of the chart plot area, which is adaptive by default.
Chart.zoomType: The magnification type of the data report in the chart, either in the X-axis or on the Y-axis, or at the same time on the XY axis.
Colors: The color between the numbers of columns when most columns in the chart. is an array that generally does not move.
credits.enabled: Whether copyright information is allowed to be displayed.
credits.href: Copyright links.
credits.text: Copyright information display text.
exporting .buttons.exportButton.enabled: Whether to allow the export button to be displayed.
exporting.buttons.exportButton.menuItems: Menu options for export buttons.
exporting.buttons.exportButton.onclick: The event in which the export button was clicked is not an internal menu.
exporting.buttons.printButton.enabled: Whether to allow print buttons.
exporting.buttons.printButton.onclick: Click events for print buttons.
Exporting.enabled: Whether print and export buttons are allowed.
Exporting.filename: The file name of the exported file.
Exporting.type: The file format in which pictures are exported by default.
exporting.url: The interface processing address converted and exported by the SVG chart.
Exporing.width: The width of the picture is exported by default.
Labels: Labels that can be loaded anywhere in the chart, with items, style.
lang: language parameter configuration, configuration related to the export button menu, configuration of time names, etc.
Legend.enabled: Whether to allow graph notes.
navigation.buttonOptions.enabled: Whether buttons in all navigations in the chart can be clicked.
plotOptions .area.allowPointSelect: Whether to allow clicks on data points.
plotOptions.area.color: The color of the drawing.
plotOptions.area.dataLabels.enabled: Whether data labeling is allowed.
plotOptions.area.enableMouseTracking: Whether to allow mouse-tracked bubbles in data points to be displayed in data charts.
plotOptions.area.events.checkboxClick: Click events in the check box in the graph in the data chart.
plotOptions.area.events.click: Click events for data points in a data chart.
plotOptions.area.events.hide: Events in a data chart when a data series is hidden.
plotOptions.area.events.show: Events in a data chart when a data series is displayed.
plotOptions.area.events.legendItemClick: In the data chart, the event when the item in the graph is clicked, the direct assignment of false, is not clickable.
plotOptions.area.events.mouseOut: Mouse out of events at data points.
plotOptions.area.events.mouseOver: The mouse of the data point passes through the event.
plotOptions.area.marker.enabled: Whether or not the marker of the point is displayed in the drawing in the chart.
plotOptions.area.marker.states.hover.enabled: Whether to allow the mouse of the marker to pass through the state.
plotOptions.area.marker.states.select.enabled: Whether to allow the selection state of the marker.
plotOptions.area.point.events.click: Each individual click event in the chart.
plotOptions.area.point.events.mouseOut
plotOptions.area.point.events.. mouseOver
plotOptions.area.point.events.remove: Events when deleting points in a chart.
plotOptions.area.point.events.select: Point selection events in the chart.
plotOptions.area.point.events.unselect: Events when the dot in the chart is deselected.
plotOptions.area.point.events.update: Events when data in a chart is updated.
plotOptions.area.visible: When loaded, the data series is displayed or hidden by default.
plotOptions.area.zIndex: In the case of multiple sequences, adjust the cascade order of each sequence.
The above point.events also apply to other area charts (arearange, areaspline, areasplinerange), other bar, column, and all charts.
plotOptions.area.showInLegend: Is it shown in the caption?
plotOptions.area.stacking: Stack by value or as a percentage.
plotOptions.area.states.hover.enabled: Whether the state on the mouse is allowed.
plotOptions.area.stickyTracking: Mouse sticky tracking data points.
plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange classes are the same as lotOptions.area
plotOptions.bar.groupPadding: For histogram groupings, the interval between each grouping.
plotOptions.bar.grouping: Whether to group data.
plotOptions.bar.minPointLength:: Defines how much the minimum length of a point is when the point value is zero
plotOptions.bar.showInLegend: Whether it appears in the caption.
plotOptions.bar.stacking: Stack by value or as a percentage (normal/percent).
The plotOptions.column, plotOptions.columnrange class is the same plotOptions.bar
The configuration associated with plotOptions.line is similar to the slotOptions.area configuration.
plotOptions.pie.ignoreHiddenPoint: In a pie chart, after a sequence is hidden by clicking on the chart, the entire pie chart is redistributed at 100%, or is it hidden only on the basis of the original chart, rendering a gap.
plotOptions.pie.innerSize: When you draw a pie chart, the center of the pie chart is left blank.
plotOptions.pie.slicedOffset: Used in conjunction with alllowPointSelect, when a point is clicked, the corresponding sector is stripped, which is the distance that is configured to leave.
Other common configuration parameters for plotOptions.pie are similar to those associated with lotOptions.area, plotOptions.scatter, plotOptions.series, and plotOptions.spline.
Series: is an array.
series.data.color: The color of a particular data.
series.data.dataLabels: A data label for a particular data in a sequence.
The series.data.events class is similar to the configuration associated with lotOptions.area.point.events.
The series.data.marker class is similar to the configuration associated with lotOptions.area.marker.
series.data.name: Configure the name of the data point.
series.data.sliced: Configured in a pie chart, the separation distance size of the sectors.
series.data.x: The x value of the point.
series.data.y: The y value of the point.
series.name: The name of the data series.
Series.stack: Stacked grouped indexes.
series.type: The type of presentation of the data series.
series.xAxis, series.yAxis: When using multiple axes, specify which axis a series corresponds to.
subtitle: Configure the subheading of the chart.
Title: Configure the title of the chart.
tooltip: Configure bubble tips for the data in the chart.
tooltip.valueDecimals: Allowed scales.
tooltip.percentageDecimals: Allows percentages after the number of points.
xAxis, yAxis configuration sets axes
allowDecimals: Whether to allow the number of counts on the axes.
Categories: is an array, the classification of axes.
PlotLines: Draw the main line.
TickColor: Tick Color.
tickInterval: The step value of the scale.
labels.rotation: the number of degrees of rotation of the scale label
The Chart Chart Area option is used to set chart area-related properties.
| Parameters | Describe | The default |
|---|---|---|
| backgroundColor | Set the chart area background color | #FFFFFF |
| borderWidth | Set the width of the chart border | 0 |
| borderRadius | Set the angle of the chart border fillet | 5 |
| renderTo | A container placed by a chart, typically placing a DIV in html to get the id property value of the DIV | Null |
| defaultSeriesType | The default chart types line, spline, area, areaspline, column, bar, pie, scatter | 0 |
| width | Chart width, which is adaptive by default to the chart container | Null |
| height | Chart height, which is adaptive by default based on the chart container | Null |
| margin | Set the spacing between the chart and other elements, arrays, such as . | [null] |
| plotBackgroundColor | The background color of the main chart area, i.e. the background color of the area surrounded by the X and Y axes | Null |
| plotBorderColor | The color of the border in the main chart area, that is, the border color of the area surrounded by the X-axis and the Y-axis | Null |
| plotBorderWidth | The width of the border in the main chart area | 0 |
| shadow | Whether to set shadows or not, you need to set the background color backgroundColor. | false |
| reflow | If you are using the chart area height and width, if you do not set the width and height, the adaptive size. | true |
| zoomType | Drag the mouse to zoom, zoom along the x-axis or the y-axis, and you can set it to: 'x', 'y', 'xy' | '' |
| events | Event callbacks, callback functions that support addSeries methods, click methods, load methods, selection methods, etc. |
The Color color option is used to set the color scheme of the chart.
| Parameters | Describe | The default |
| color | Used to display the colors of charts, bars/bars/cakes, etc., in array form. | array |
Highcharts already provides a variety of color schemes by default, and when you want to display more graphics than color types, the extra graphics are automatically selected from the first color scheme. Ways to customize your color scheme:
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4']
});
The Title title option is used to set the title-related properties of the chart.
| Parameters | Describe | The default |
|---|---|---|
| text | The content of the title text. | Chart title |
| align | Horizontal alignment. | center |
| verticalAlign | Vertical alignment. | top |
| margin | The spacing between the title and the subtitle or the main chart interval. | 15 |
| floating | Whether it floats or not, if true, the title can deviate from the main chart area and can be used with the x, y properties. | false |
| style | Set the CSS style. |
{color: '#3E576F',
fontSize: '16px'} |
The subtitle provides roughly the same property options as the title, and you can refer to the title option above, and it's worth noting that the subtitle's text option defaults to '', which is empty, so the subtitle doesn't appear by default.
The X-axis option is used to set chart X-axis-related properties.
| Parameters | Describe | The default |
|---|---|---|
| categories | Set X-axis classification names, arrays, e.g. categories: 'Apples', 'Bananas', 'Oranges'" | [] |
| title | X-axis name, support for text, enabled, align, rotation, style and other properties | |
| labels | Set the style styles of the X-axis category names, formatformatter, angle rotation, etc. | array |
| max | X-axis maximum (when categories are empty), if null, the maximum value automatically matches a maximum value based on X-axis data. | Null |
| min | X-axis minimum value (when categories are empty), if null, the minimum value automatically matches a minimum value based on X-axis data. | array |
| gridLineColor | Grid (vertical) color | #C0C0C0 |
| gridLineWidth | The width of the grid (vertical). | 1 |
| lineColor | Baseline color | #C0D0E0 |
| lineWidth | Baseline width | 0 |
The Y-axis option is basically the same as the xAxis option above, please refer to the parameter settings in the table above and no longer list them separately.
The data column option is used to set the data-related properties to be displayed in the chart.
| Parameters | Describe | The default |
|---|---|---|
| data |
A column of data displayed in a chart that can be in array or JSON format.
e.g. data: s0, 5, 3, 5, or
data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}] |
'' |
| name | Displays the name of the data column. | '' |
| type | Data column types, support area, areaspline, bar, column, line, pie, scatter or spline | line |
PlotOptions is used to set data point-related properties in a chart. PlotOptions is slightly different in its property settings depending on the chart type and now lists common options.
| Parameters | Describe | The default |
| enabled | Whether to display the data directly on the data point | false |
| allowPointSelect | Whether to allow data points to be selected with the mouse | false |
| formatter | Callback function that formats the data display | formatter: function() {return this.y; } |
Tooltip is used to set the prompt box information that appears when the mouse slides toward a data point.
| Parameters | Describe | The default |
| enabled | Whether to display the prompt box | true |
| backgroundColor | Set the background color of the prompt box | rgba(255, 255, 255, .85) |
| borderColor | Hint box border color, which automatically matches the color of the data column by default | auto |
| borderRadius | Tip box circle angle | 5 |
| shadow | Whether to display a hint box shadow | true |
| style | Style the contents of the prompt box, such as font color | color:'#333' |
| formatter | Callback function to format the display of the output prompt box. Returned content supports html tags such as: slt;b>, slt;strong>, slt;i>, slt;em>, slt;br;br;,"," | 2 |
Legend is used to set legend-related properties.
| Parameters | Describe | The default |
|---|---|---|
| layout | Display form, support horizontal horizontal and vertical vertical | horizontal |
| align | Alignment. | center |
| backgroundColor | Legend background color. | Null |
| borderColor | Legend border color. | #909090 |
| borderRadius | Legend border angle | 5 |
| enabled | Whether to display the legend | true |
| floating | Whether it can float, mate x, y properties. | false |
| shadow | Whether to display shadows | false |
| style | Style the legend content | '' |
For more details, please refer to the English documentation on the official website of highcharts: http://api.highcharts.com/highcharts