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脚本传递变量到另一个脚本文件中的方法,在脚本中调用另一脚本,即创建了一个子进程,感兴趣的朋 ...
随机推荐
- linux文档权限
1.登录 root 用户:su - mac一开始进入创建的用户是具有管理员权限的用户,但是密码却不是进入 root 用户的密码,可以使用 sudo su - 免密进入 root 用户. 2.退出 ro ...
- .net连接MySQL数据库的方案与实例演示
以下的文章主要是向大家描述的是.net连接MySQL数据库的实际操作方法与其实例的演示.net连接MySQL数据库的实际操作方案我们主要是将其分成三部分,以下的文章就有其详细内容的描述. http:/ ...
- JavaScript检查是否包含某个字符
转自:http://my.oschina.net/u/1450300/blog/389325 indexOf用法: indexOf 方法返回一个整数值,指出 String 对象内子字符串的开始位置.如 ...
- PCB WebAPI 接口测试工具与接口文档生成
我们自己写WebAPI或调用对方系统提供的WebAPI时,测试WebAPI接口工具用哪些工具呢. 这里将3种WebAPI常用到的工具使用说明.主要是讲对第3种WebApiTestClientWebAp ...
- [Apple开发者帐户帮助]六、配置应用服务（5.3）推送通知（APN）：从您的Web服务器发送推送通知
要使用APN从Web服务器向macOS用户发送推送通知,请注册网站推送标识符并创建网站推送证书. 对于每个网站,请注册一个网站推送标识符,用于验证通知是否来自您的服务器.然后创建一个网站推送证书以签署 ...
- SQLServer局部变量和全局变量介绍05-29学习笔记
变量 数据在内存中存储可以变化的量叫变量.为了在内存中存储信息,用户必须指定存储信息的单元,并为了该存储单元命名, 以方便获取信息,这就是变量的功能.Transact-SQL可以使用两种变量,一种是局 ...
- 参加2016华为codecraft编程精英挑战赛后感
2016年4月参加了华为的软件比赛. 关于比赛:给了一道图论的np-hard问题.刚开始完全不知道怎么入手,请教过师兄,自己也琢磨过,没有什么万全的解决方法.注意,这里说的是万全的办法.本科搞算法时候 ...
- EF 新增数据时提示it has a DefiningQuery and no <InsertFunction> element exists in the <ModificationFunctionMapping> element
it has a DefiningQuery and no <InsertFunction> element exists in the <ModificationFunctionM ...
- Mysql(Innodb)如何避免幻读
Mysql(Innodb)如何避免幻读 有意思 MySQL InnoDB支持三种行锁定方式: 行锁(Record Lock):锁直接加在索引记录上面,锁住的是key. 间隙锁(Gap Lock):锁定 ...
- 6.10---springboot的配置