Basic Structure of highcharts

In a recent project, I used a lot of charts and found that the pure JS chart plug-in highcharts is very useful and powerful. Make a note.

 

The basic structure is shown in the following figure:

 

In, the following items are displayed:

 

Xaxis	X coordinate
Yaxis	Y coordinate
Credits	Copyright information
Legend	Legend
Exporting	Export options
Title	Title
Tooltip	Tip prompt
Series	One or more data series on the chart, which is a column or curve in the table.

 

Chart type

English name	Chinese name
Line	Line chart
Spline	Graph
Area	Area Chart
Areaspline	Curve Area Chart
Arearange	Area dimension chart
Areasplinerange	Curve area dimension chart
Column	Bar Chart
Columnrange	Bar Chart
Bar	Bar Chart
Pie	Pie Chart
Scatter	Scatter chart
Boxplot	Boxplot
Bubble	Bubble chart
Errorbar	Error line chart
Funnel	Funnel chart
Gauge	Gauge chart
Waterfall	Waterfall chart
Polar	Radar chart
Pyramid	Pyramid

Commonly used chart types include line, pie, bar, and column.

 

Basic configuration code:

VaR chart = new highcharts. Chart ({
Chart :{}, // global chart options

Title :{},

Subtitle :{},
Xaxis :{}, // X coordinate
Yaxis :{}, // y coordinate

Tooltip: {}, // tip prompt
Plotoptions: {}, // set the chart area
Legend: {}, // legend
Credits: {}, // copyrighted Trademark
Series: [{}] // chart data column

});

Basic Structure of highcharts