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. });

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. JpGraph中文乱码问题解决

    JpGraph是一个PHP的图形类库,可以方便地生成各种柱状图,饼图,折线图等等,而且还可以方便地加文字.但是,中文的情况就稍微麻烦了一点.在JpGraph中默认是要把字符串转成utf8的,但是如果你 ...

  2. js实现伪音乐盒

    支持快进 <div class="music-part"> <div class="box-bg"></div> <d ...

  3. Expressions-->Member lookup

    7.4 Member lookup 在word文档的第140页 A member lookup is the process whereby凭借:通过…:借以:与…一致 the meaning of ...

  4. 动态DNS——本质上是IP变化，将任意变换的IP地址绑定给一个固定的二级域名。不管这个线路的IP地址怎样变化，因特网用户还是可以使用这个固定的域名 这样看的话，p2p可以用哇

    动态域名是因应网络远程访问的需要而产生的一项应用技术.因为没有固定IP,只能运用二级域名来应对经常变化的IP,动态域名的由来因此而产生. 它当前主要应用在:路由器.网络摄像机.带网络监控的硬盘录像机. ...

  5. astgo-完整功能介绍

    核心功能: Astgo最核心和强大的功能是呼叫中心模块.接入方式:中继卡.模拟卡接入,中继网关.O口网关接入.网络IP接入等.单机200个坐席,通话实时录音.灵活队列分组.开放式IVR设计,修改业务逻 ...

  6. IOException 简单解决方法

    java.lang.IllegalStateException异常解决方法 这个异常大多数是由文件读取,下载时抛出,但是偶尔也会由类型转换时异常抛出此异常. 错误:Optional int param ...

  7. [Swift通天遁地]九、拔剑吧-(15)搭建具有滑出、视差、3D变形等切换效果的引导页

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

  8. zb的生日-------搜索 和 动态规划

    简单的贪心算法 : http://love-oriented.com/pack/P01.html  说实话 我是喜欢 动态规划的.......但是省赛迫在眉睫 , 只好先 学 搜索了  ,  赶紧   ...

  9. 吝啬的国度 ---用vector 来构图

    根据题目可以看出来  有n 个城市 只有 n-1  条路线 那么  就可以确定这个图中  不存在 圆  所以从一个点到另一个点 只有一条唯一的路  所以从一个节点到另一个节点 那么 这个节点只有一个唯 ...

  10. ACM_填格子

    填格子 Time Limit: 2000/1000ms (Java/Others) Problem Description: 在一个n*n格子里边已经填了部分大写字母,现在给你个任务:把剩下的格子也填 ...