Highcharts教程--把js代码从html中抽离出来，放到单独的一个js文件中。由html页面调用

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

 

posted @ 2019-02-21 10:37  哈喽哈喽111111  阅读(1301)  评论(0)  编辑  收藏  举报