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 配置

});

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

  1. 在C的头文件中定义的结构体，如何在cpp文件中引用

    解决方案1:在cpp文件中放置.c,且在该文件中引用变量 解决方案2:在一个cpp文件中包含.c,但在另一个cpp文件中使用结构体变量 cpp文件1 cpp文件2 #include "dia ...

  2. 如何调用另一个python文件中的代码

    模块的搜索路径 模块的搜索路径都放在了sys.path列表中,如果缺省的sys.path中没有含有自己的模块或包的路径,可以动态的加入(sys.path.apend)即可.下面是sys.path在Wi ...

  3. js代码突然在花括号回车自动多加了一个大括号

    js代码突然在花括号回车自动多加了一个大括号. 检查发现,前面有一个行带有左括号的注释行.

  4. HTML 5 应用程序缓存（Application Cache）cache manifest 文件使用 html5 中创建manifest缓存以及更新方法 一个manifest文件会创建一份缓存，不同的manifest文件其缓存的内容是互不干扰的

    HTML5 离线缓存-manifest简介 HTML 5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(A ...

  5. 《Java虚拟机原理图解》1.5、 class文件中的方法表集合--method方法在class文件中是怎样组织的

    0. 前言 了解JVM虚拟机原理是每一个Java程序员修炼的必经之路.但是由于JVM虚拟机中有很多的东西讲述的比较宽泛,在当前接触到的关于JVM虚拟机原理的教程或者博客中,绝大部分都是充斥的文字性的描 ...

  6. 《Java虚拟机原理图解》1.4 class文件中的字段表集合--field字段在class文件中是怎样组织的

    0.前言 了解JVM虚拟机原理是每一个Java程序员修炼的必经之路.但是由于JVM虚拟机中有很多的东西讲述的比较宽泛,在当前接触到的关于JVM虚拟机原理的教程或者博客中,绝大部分都是充斥的文字性的描述 ...

  7. 怎样将多个CSS文件导入一个CSS文件中

    问题: 在HTML中引入css的其中的两个方法:    导入式和链接式的目的都是将一个独立的css文件引入一个文件中,二者的区别不大,事实上,二者最大的区别在于链接式使用html的标记引入外部css文 ...

  8. 多个.txt文件合并到一个.txt文件中

    如果想要将多个.txt文件合并到一个.txt文件中,可以先将所有.txt文件放到一个文件夹中,然后使用.bat文件完成任务. 例如,在一个文件夹下有1.txt, 2.txt, 3.txt三个文件,想把 ...

  9. shell如何传递变量到另一个脚本文件中

    http://www.jbxue.com/article/shell/20707.html本文介绍了shell脚本传递变量到另一个脚本文件中的方法,在脚本中调用另一脚本,即创建了一个子进程,感兴趣的朋 ...

随机推荐

  1. android自己定义控件系列教程-----仿新版优酷评论剧集卡片滑动控件

    我们先来看看优酷的控件是怎么回事? 仅仅响应最后也就是最顶部的卡片的点击事件,假设点击的不是最顶部的卡片那么就先把它放到最顶部.然后在移动到最前面来.重复如次. 知道了这几条那么我们就非常好做了. 里 ...

  2. Boost Replaceable by C++11 language features or libraries

    Replaceable by C++11 language features or libraries Foreach → Range-based for Functional/Forward → P ...

  3. ansible安装测试

    安装: # yum install ansible # yum install sshpass 配置: # vi /etc/ansible/hosts  [mysqldb] 172.16.100.23 ...

  4. luogu2679 子串

    题目大意 有两个仅包含小写英文字母的字符串 A 和 B.现在要从字符串 A 中取出 k 个互不重叠的非空子串,然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来得到一 个新的字符串,请问 ...

  5. JSP-Runoob：JSP 表达式语言

    ylbtech-JSP-Runoob:JSP 表达式语言 1.返回顶部 1. JSP 表达式语言 JSP表达式语言(EL)使得访问存储在JavaBean中的数据变得非常简单.JSP EL既可以用来创建 ...

  6. compileSdkVersion, minSdkVersion 和 targetSdkVersion的选择(copy)

    英文原文:Picking your compileSdkVersion, minSdkVersion, and targetSdkVersion 作者:Ian Lake,Google Android ...

  7. [Swift通天遁地]九、拔剑吧-(12)创建Preview-Transition图像预览界面

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  8. Akka源码分析-Remote-网络链接

    上一篇博客中,我们分析了Akka remote模式下消息发送的过程,但细心的读者一定发现没有介绍网络相关初始化.创建链接.释放链接的过程,本文就介绍一下相关的内容. 网络初始化就离不开ActorSys ...

  9. 如何自学编程，零基础适合学习Java或者Web前端吗，非科班的能学java吗？

    很多人都会选择自学Java或者前端,相信有在校的大学生,有正在上班想转行的,也有已经在自学的.下面通过几个问题我来给大家分析学习编程的难易程度. 编程是什么? 通俗的理解,编程就是编写程序,哪什么是程 ...

  10. android webview 简单应用

    一直没有用过webView 在网上找了一个小例子,主要实现以下功能: 1.当webview加载网页的时候在标题栏上显示加载进度 2.隐藏webkit浏览器的地址栏 3.设置程序的标题为网页的标题 4. ...