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脚本传递变量到另一个脚本文件中的方法,在脚本中调用另一脚本,即创建了一个子进程,感兴趣的朋 ...
随机推荐
- MySQL hash分区（四）
具体描写叙述总结请看MySQL分区(一) 样例:该样例为本人个人学习总结分享->具体说明-->有问题欢迎前来交流 watermark/2/text/aHR0cDovL2Jsb2cuY3Nk ...
- js实现存取Map结构的数据
//控制关联表单元素是否显示 var relateItemMap = {}; for(var i=0; i<formAttributeItemList.length; i++){ var ite ...
- shell 字符串拼接 获取自身文件名 日志记录
shell 字符串拼接 获取自身文件名 日志记录 [root@hadoop2 xiaole_chk_url]# sh a.sh123.loga.sh[root@hadoop2 xiaole_chk_ ...
- 创建 /dev/video0 节点 （转载）
转自:http://blog.csdn.net/linuxmake/article/details/8208464 最近做摄像头驱动,发现没有 /dev/video0节点,经过查看发现是内核编译时没有 ...
- PCB InCAM 获取 JOB STEP 实现外挂脚本调试功能实现
PCB CAM自动化基于Incam 打造,在测试时经常遇到调试障碍,每次自行对功能测试时,生成了exe脚本后,再到Incam里面运行,发现问题,再回来修改代码,非常不爽, 参考Genesis调试运行模 ...
- B. Mashmokh and ACM(dp)
http://codeforces.com/problemset/problem/414/B B. Mashmokh and ACM time limit per test 1 second memo ...
- cropbox
今天给大家分享一款基于jQuery头像裁剪插件cropbox,这是一款简单实用的jQuery头像在线裁剪插件.该插件适用于适用浏览器:IE8.360.FireFox.Chrome.Safari.Ope ...
- 2243: [SDOI2011]染色(树链剖分+线段树)
2243: [SDOI2011]染色 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 8400 Solved: 3150[Submit][Status ...
- Akka源码分析-故障恢复
Actor故障恢复是akka中非常重要的内容,在之前的博客中虽然有介绍,但都是杂糅在其他知识点的细节中,本博客将单独介绍这一部分的故障恢复.为了简化分析的单独,本文只研究用户的actor故障恢复的步骤 ...
- 【洛谷4219】[BJOI2014]大融合（线段树分治）
题目: 洛谷4219 分析: 很明显,查询的是删掉某条边后两端点所在连通块大小的乘积. 有加边和删边,想到LCT.但是我不会用LCT查连通块大小啊.果断弃了 有加边和删边,还跟连通性有关,于是开始yy ...