Introduction:
Highcharts series software includes Highcharts JS, Highstock JS and Highmaps JS, which are HTML5 chart libraries written in pure JavaScript. All the source codes are open, and can be used and edited for personal and non-commercial purposes. Chinese network addresshttps://www.hcharts.cn/docs/start-introduction
Highchartsa: the basic chart mainly includes more than 20 kinds of charts, such as line chart, curve chart, area chart, histogram, pie chart, scattered point chart, instrument chart, bubble chart, waterfall flow chart, etc.
Highstock: the stock chart control contains several advanced navigation components (preset data time range, date selector, scroll bar, pan and zoom functions)
High maps: the excellent map component can be used to create interactive map charts that show sales, election results and other geographical relationships.
Highchartsa uses:
Download official resource package or import CDN file directly
CDN is introduced as follows
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>Create container and specify size for subsequent operations
<div id="container" style="width:400px;height:400px"></div>The chart is created by the highcharts.chart function. The highcharts.chart function has two parameters: the first is the id of the container, and the second is the chart configuration information.
The code is as follows
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<script src="highcharts.js"></script>
<script src="JQuery.js"></script>
<body>
<div id="container" style="width:400px;height:400px"></div>
<script type="text/javascript">
// Chart configuration
var options={
//Remove the generated chart watermark link
credits: { enabled: false },
chart:{
type:"bar" //Specifies the type of chart. The default is line
},
title: {
text: 'My first chart' // Title
},
xAxis: {
categories: ['Apple', 'Banana', 'orange'] // x axis classification
},
yAxis: {
title: {
text: 'Number of fruits to eat' // y axis title
}
},
series: [{ // Data column
name: 'Xiao Ming', // Data column name
data: [1, 0, 4] // data
}, {
name: 'Xiaohong',
data: [5, 7, 3]
}]
};
var chart=Highcharts.chart("container",options);
</script>
</body>
</html>Highstock and Highmaps