Highcharts Highstock 学习笔记 第一篇 Highcharts配置
Highcharts是一款纯javascript编写的图表库，能够很简单便捷的在Web网站或Web应用中添加交互性的图表，Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表，可以满足你对Web图表的任何需求 ！
0、引入在线资源（也可以引用本地资源）在线减少服务器压力
<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
新建一个html文件，将highcharts引入到你的页面后，通过两个步骤我们就可以创建一个简单的图表了。
1、创建div容器
在页面的 body 部分创建一个div，并指定div 的 id，高度和宽度，代码如下
<div id="container" style="min-width:800px;height:400px"></div>
2、编写Highcharts代码
编写Highcharts必须的代码，用<script></script>包裹，代码可以放在页面的任意地方，一个最简单的图表实例代码如下
$(function () {
$('#container').highcharts({ //图表展示容器，与div的id保持一致
chart: {
type: 'column' //指定图表的类型，默认是折线图（line）
},
title: {
text: 'My first Highcharts chart' //指定图表标题
},
xAxis: {
categories: ['my', 'first', 'chart'] //指定x轴分组
},
yAxis: {
title: {
text: 'something' //指定y轴的标题
}
},
series: [{ //指定数据列
name: 'Jane', //数据列名
data: [1, 0, 4] //数据
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
完成上述两个步骤后，保存文件并用浏览器打开，运行结果如下图所示
上述例子完整html代码如下
<html>
<head>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'My first Highcharts chart'
},
xAxis: {
categories: ['my', 'first', 'chart']
},
yAxis: {
title: {
text: 'something'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
</head> <body>
<div id="container" style="min-width:800px;height:400px;"></div>
</body>
</html>
至此，我们已经初步了解和学会了自己编写简单的Highcharts图表了，这只是开始，后面的会越来越有趣。
Highcharts Highstock 学习笔记 第一篇 Highcharts配置的更多相关文章
- ActionBarSherlock学习笔记 第一篇——部署
ActionBarSherlock学习笔记 第一篇--部署 ActionBarSherlock是JakeWharton编写的一个开源框架,使用这个框架,可以实现在所有的Android ...
- ASP.NET Core 学习笔记 第一篇 ASP.NET Core初探
前言 因为工作原因博客断断续续更新,其实在很早以前就有想法做一套关于ASP.NET CORE整体学习度路线,整体来说国内的环境的.NET生态环境还是相对比较严峻的,但是干一行爱一行,还是希望更多人加入 ...
- Asp.net core Identity + identity server + angular 学习笔记 (第一篇)
用了很长一段时间了, 但是一直没有做过任何笔记,感觉 identity 太多东西要写了, 提不起劲. 但是时间一久很多东西都记不清了. 还是写一轮吧. 加深记忆. 这是 0-1 的笔记, 会写好多篇. ...
- Coap协议学习笔记-第一篇
1. 物联网应用上一般使用单片机(或者其他SOC),单片机的RAM内存一般只有20KB~~128KB左右,然而一个TCP协议栈可能就20KB,所以只能用UDP,因为UDP相对小很多,然后在UDP上加了 ...
- Spring学习笔记第一篇——初识Spring
1.简单介绍 spring的ioc底层是先配置xml文件,接着创建工厂,利用dom4j解析配置文件,最后通过反射完成.大概步骤差不多这样,这些具体代码spring帮你完成了.现在我们只需要配置xml和 ...
- Android学习笔记(第一篇)编写第一个程序Hello World+Activity
PS:终于开始正式的搞Android了...无人带的一介菜鸟,我还是自己默默的努力吧... 学习内容: 1.编写第一个Hello World程序.. 学习Android,那么就需要有一个编译器来集 ...
- Node 之 Express 学习笔记 第一篇 安装
最近由于工作不忙,正好闲暇时间学学基于 node 的 web开发框架. 现在关于web开发框架除了Express 还有新出的 KOA以及其它一些. 但是想想还是先从 Express 入手吧.因为比较成 ...
- Django学习笔记第一篇--Hello,Django
一.Django的安装: 1.python虚拟运行的环境的安装以及安装django: sudo pip install virtualenv export VIRTUALENV_DISTRINUTR= ...
- Vue.js学习笔记 第一篇 数据绑定
双花括号文本插值 先来个最简单的例子,看完之后立马会用Vue了,是不是很有成就感 <!DOCTYPE html> <html> <head> <meta ch ...
随机推荐
- Python面向对象之面向对象基本概念
面向过程和面向对象概念 过程和函数:过程类似于函数,只能执行,但是没有返回结果:函数不仅能执行,还能返回结果. 面向过程和面向对象 基本概念 面向过程-怎么做 把完成某一个需求的所有步骤从头到尾逐步实 ...
- Python supprocess模块
当我们需要调用系统的命令的时候,最先考虑的os模块.用os.system()和os.popen()来进行操作.但是这两个命令过于简单,不能完成一些复杂的操作,如给运行的命令提供输入或者读取命令的输出, ...
- window7 上创建定时任务来运行自动化脚本
跌跌撞撞,坑坑洼洼,终于把公司一个小模块的接口测试脚本写完了,一共有20多个吧!后来发现每天自己去运行一键执行的脚本太麻烦,所以想用windows的定时任务来解决这个问题!今天看了篇文章,所以决定实践 ...
- hdu 5122(2014ACM/ICPC亚洲区北京站) K题 K.Bro Sorting
传送门 对于错想成lis的解法,提供一组反例 1 3 4 2 5同时对于这次案例也可以观察出解法:对于每一个数,如果存在比它小的数在它后面,它势必需要移动,因为只能小的数无法向右移动,而且每一次移动都 ...
- POJ - 2007 极角排序(Java 实现)
POJ 2007 将所有的点按逆时针输出 import java.io.*; import java.util.*; public class Main { static class Point im ...
- Eclipse中使用JRebel实现项目热部署（Maven插件版）
JRebel实现项目热部署(Maven插件版) 热部署,就是在应用运行过程中不进行重启,可直接进行软件升级. 在开发过程中,热部署就是在项目运行过程中变更代码,无需重启服务器即可使代码生效. tomc ...
- 【Codeforces 493D】Vasya and Chess
[链接] 我是链接,点我呀:) [题意] [题解] 会发现两个皇后之间如果只有奇数个位置 也就是n%2==1 那么第二个人总是赢的 因为如果white往下跑的话,black也能往下跑. 第二个人没有输 ...
- Android第三方开源SeekBarCompat：音乐类播放器等APP进度条常用
Android第三方开源SeekBarCompat:音乐类播放器等APP进度条常用 Android平台原生的SeekBar设计简单,然而,比如现在流行的一些音乐播放器的播放进度控制条,如果直接使 ...
- git常见操作---由简入深
常用命令 常用指令 ls 显示文件或目录 -l 列出文件详细信息l(list) -a 列出当前目录下所有文件及目录,包括隐藏的a(all) mkdir 创建目录 -p 创建目录,若无父目录,则创建p( ...
- 使用java操作hbase（单节点）
1.在运行java代码之前,一定要先启动Hbase,很重要!! cd /home/cx/itcast/hbase-1.2.6/bin ./start-hbase.sh 2.新建一个java项 ...