1.html页面写法
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>第一个 Highcharts 图表</title> 6 <!-- 引入 jquery.js --> 7 <script src="static/jquery-3.3.1.min.js"></script> 8 <!-- 引入 highcharts.js --> 9 <script src="static/highcharts-7.0.3.js"></script></head> 10<body> 11 12<!-- 图表容器 DOM --> 13<div id="container" style="min-width:400px;height:400px"></div> 14 15<script src="static/a.js"></script> 16 17</body> 18</html>
2.a.js文件
1$(document).ready(function () { 2 $('#container').highcharts({ 3 chart: { 4 type: 'spline', 5 inverted: true 6 }, 7 title: { 8 text: '大气温度和海拔高度关系' 9 }, 10 subtitle: { 11 text: '根据标准大气模型绘制' 12 }, 13 xAxis: { 14 reversed: false, 15 title: { 16 enabled: true, 17 text: '海拔高度' 18 }, 19 labels: { 20 formatter: function () { 21 return this.value + 'km'; 22 } 23 }, 24 maxPadding: 0.05, 25 showLastLabel: true 26 }, 27 yAxis: { 28 title: { 29 text: '温度' 30 }, 31 labels: { 32 formatter: function () { 33 return this.value + '°'; 34 } 35 }, 36 lineWidth: 2 37 }, 38 legend: { 39 enabled: false 40 }, 41 tooltip: { 42 headerFormat: '<b>{series.name}</b><br/>', 43 pointFormat: '{point.x} km: {point.y}°C' 44 }, 45 plotOptions: { 46 spline: { 47 marker: { 48 enable: false 49 } 50 } 51 }, 52 series: [{ 53 name: '温度', 54 data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1], 55 [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]] 56 }] 57 }); 58 59});
注意js文件的写法：
1$(document).ready(function () { 2 $('#container').highcharts({ 3 // Highcharts 配置 4 }); 5});
或者其简写形式：
1$(function () { 2 $('#container').highcharts({ 3 // Highcharts 配置 4});