1.html页面写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个 Highcharts 图表</title>
<!-- 引入 jquery.js -->
<script src="static/jquery-3.3.1.min.js"></script>
<!-- 引入 highcharts.js -->
<script src="static/highcharts-7.0.3.js"></script></head>
<body>
<!-- 图表容器 DOM -->
<div id="container" style="min-width:400px;height:400px"></div>
<script src="static/a.js"></script>
</body>
</html>
2.a.js文件
$(document).ready(function () {
$('#container').highcharts({
chart: {
type: 'spline',
inverted: true
},
title: {
text: '大气温度和海拔高度关系'
},
subtitle: {
text: '根据标准大气模型绘制'
},
xAxis: {
reversed: false,
title: {
enabled: true,
text: '海拔高度'
},
labels: {
formatter: function () {
return this.value + 'km';
}
},
maxPadding: 0.05,
showLastLabel: true
},
yAxis: {
title: {
text: '温度'
},
labels: {
formatter: function () {
return this.value + '°';
}
},
lineWidth: 2
},
legend: {
enabled: false
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x} km: {point.y}°C'
},
plotOptions: {
spline: {
marker: {
enable: false
}
}
},
series: [{
name: '温度',
data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
}]
});
});
注意js文件的写法：
$(document).ready(function () {
$('#container').highcharts({
// Highcharts 配置
});
});
或者其简写形式：
$(function () {
$('#container').highcharts({
// Highcharts 配置
});
