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 配置
});
Highcharts教程--把js代码从html中抽离出来，放到单独的一个js文件中。由html页面调用的更多相关文章
- 在C的头文件中定义的结构体，如何在cpp文件中引用
解决方案1:在cpp文件中放置.c,且在该文件中引用变量 解决方案2:在一个cpp文件中包含.c,但在另一个cpp文件中使用结构体变量 cpp文件1 cpp文件2 #include "dia ...
- 如何调用另一个python文件中的代码
模块的搜索路径 模块的搜索路径都放在了sys.path列表中,如果缺省的sys.path中没有含有自己的模块或包的路径,可以动态的加入(sys.path.apend)即可.下面是sys.path在Wi ...
- js代码突然在花括号回车自动多加了一个大括号
js代码突然在花括号回车自动多加了一个大括号. 检查发现,前面有一个行带有左括号的注释行.
- HTML 5 应用程序缓存（Application Cache）cache manifest 文件使用 html5 中创建manifest缓存以及更新方法 一个manifest文件会创建一份缓存，不同的manifest文件其缓存的内容是互不干扰的
HTML5 离线缓存-manifest简介 HTML 5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(A ...
- 《Java虚拟机原理图解》1.5、 class文件中的方法表集合--method方法在class文件中是怎样组织的
0. 前言 了解JVM虚拟机原理是每一个Java程序员修炼的必经之路.但是由于JVM虚拟机中有很多的东西讲述的比较宽泛,在当前接触到的关于JVM虚拟机原理的教程或者博客中,绝大部分都是充斥的文字性的描 ...
- 《Java虚拟机原理图解》1.4 class文件中的字段表集合--field字段在class文件中是怎样组织的
0.前言 了解JVM虚拟机原理是每一个Java程序员修炼的必经之路.但是由于JVM虚拟机中有很多的东西讲述的比较宽泛,在当前接触到的关于JVM虚拟机原理的教程或者博客中,绝大部分都是充斥的文字性的描述 ...
- 怎样将多个CSS文件导入一个CSS文件中
问题: 在HTML中引入css的其中的两个方法: 导入式和链接式的目的都是将一个独立的css文件引入一个文件中,二者的区别不大,事实上,二者最大的区别在于链接式使用html的标记引入外部css文 ...
- 多个.txt文件合并到一个.txt文件中
如果想要将多个.txt文件合并到一个.txt文件中,可以先将所有.txt文件放到一个文件夹中,然后使用.bat文件完成任务. 例如,在一个文件夹下有1.txt, 2.txt, 3.txt三个文件,想把 ...
- shell如何传递变量到另一个脚本文件中
http://www.jbxue.com/article/shell/20707.html本文介绍了shell脚本传递变量到另一个脚本文件中的方法,在脚本中调用另一脚本,即创建了一个子进程,感兴趣的朋 ...
随机推荐
- Redis缓存数据库安全加固指导（一）
背景 在众多开源缓存技术中,Redis无疑是目前功能最为强大,应用最多的缓存技术之一,参考2018年国外数据库技术权威网站DB-Engines关于key-value数据库流行度排名,Redis暂列第一 ...
- HBase行锁原理及实现
请带着例如以下问题阅读本文. 1.什么是行锁? 2.HBase行锁的原理是什么? 3.HBase行锁是怎样实现的? 4.HBase行锁是怎样应用的? 一.什么是行锁? 我们知道.数据库中存在事务的概念 ...
- BC - Zball in Tina Town (质数 + 找规律)
Zball in Tina Town Accepts: 541 Submissions: 2463 Time Limit: 3000/1500 MS (Java/Others) Memory ...
- 【转】ACM 2567 -- 树的Prufer编码
本文介绍北京大学ACM网站2567号题目的解法.介绍部分基本翻译自网站上的题目介绍. 题目介绍: 给定一棵各节点编号为整数1,2,3...n的树(例如,无环连通图),其Prufer编码(Pruf ...
- 常用进制的转换、进制数的and与or或xor异或运算
[十进制转换成其他进制]例:将25转换为二进制数 解: 25÷2=12 余数1 12÷2=6 余数0 6÷2=3 余数0 3÷2=1 余数1 1÷2=0 余数1 所 ...
- Java中static final 与 final 的区别（转载）
转自:http://advance0683.iteye.com/blog/1107732 Java中static final 与 final 的区别: 例子: Java代码 import java.u ...
- css - 所有的a标签设置为新窗口打开
前言 由于工作的需要,需要把某个页面下的所有a标签都设置为新开新窗口,即:<a href="XXX">增加target:<a href="XXX&quo ...
- 当下较热web前端技术汇总
Web前段技术发展很快,主流技术日新月异,想想自己刚毕业那会用的asp技术,现在已经很少有主流网站在使用了.再到后来的J2EE框架,然后SpringMVC大行其道,但是最近各种js框架被广为传播,Ht ...
- 如何获取<a>标签的Id
案例: <a id='213' href='javascript:void(0);'onclick=DealFun(this.Id);>删除</a> 解决方案: functio ...
- POJ 1584 计算几何
思路: 求一遍凸包 用三角形面积(叉积求一下)/边长 求出来高,跟半径比一比 坑点:凸包上三点共线 //By SiriusRen #include <cmath> #include < ...