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 @   哈喽哈喽111111  阅读(1304)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示