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