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 配置});
