Highcharts 非常实用的Javascript统计图
Highcharts 官网示例：http://www.highcharts.com/demo/
Highcharts 官网文档：http://www.highcharts.com/documentation/how-to-use
官网实例中给出了各式各样的demo，可以参照document修改自己需要的即可。
下面是一个学生成绩走势demo：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: '初三第一学期'
},
xAxis: { type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
}
}
},
yAxis: {
title: {
text: '分数'
},
min: 0
},
tooltip: {
//这种模式下，每点的tooltip单独显示
shared: false,
formatter: function() {
var s = '<b>'+ this.point.name +'</b>'+'<br/>'+ Highcharts.dateFormat("%Y/%m/%d", this.point.x) +': '+this.point.y +'分<br/>';
return s;
}
/**
这种模式下，两个点的tooltip显示在一起
shared: true,
formatter: function() {
var s='';
$.each(this.points, function(i, point) {
s += '<b>'+ point.key +'</b>'+'<br/>'+ Highcharts.dateFormat("%Y/%m/%d", point.x) +': '+point.y +'分<br/>';
});
return s;
}
*/
},
series: [{
name: '英语',
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc. data: [
{x:Date.UTC(1970, 9, 27), y:55, name:'高一第一学期第一次考试'},
{x:Date.UTC(1970, 10, 10), y:60, name:'高一第一学期第二次考试'},
{x:Date.UTC(1970, 10, 18), y:70, name:'高一第一学期第三次考试'},
{x:Date.UTC(1970, 11, 2), y:80, name:'高一第一学期第四次考试'},
{x:Date.UTC(1970, 11, 9), y:60, name:'高一第一学期第五次考试'},
{x:Date.UTC(1970, 11, 16), y:60, name:'高一第一学期第六次考试'},
{x:Date.UTC(1970, 11, 28), y:67, name:'高一第一学期第七次考试'},
{x:Date.UTC(1971, 0, 1), y:81, name:'高一第一学期第八次考试'},
{x:Date.UTC(1971, 0, 8), y:78, name:'高一第一学期第九次考试'},
{x:Date.UTC(1971, 0, 12), y:98, name:'高一第一学期第十次考试'},
{x:Date.UTC(1971, 0, 27), y:84, name:'高一第一学期第十一次考试'},
{x:Date.UTC(1971, 1, 10), y:80, name:'高一第一学期第十二次考试'},
{x:Date.UTC(1971, 1, 18), y:80, name:'高一第一学期第十三次考试'},
{x:Date.UTC(1971, 1, 24), y:92, name:'高一第一学期第十四次考试'},
{x:Date.UTC(1971, 2, 4), y:49, name:'高一第一学期第十五次考试'},
{x:Date.UTC(1971, 2, 11), y:79, name:'高一第一学期第十六次考试'},
{x:Date.UTC(1971, 2, 15), y:73, name:'高一第一学期第十七次考试'},
{x:Date.UTC(1971, 2, 25), y:61, name:'高一第一学期第十八次考试'},
{x:Date.UTC(1971, 3, 2), y:76, name:'高一第一学期第19次考试'},
{x:Date.UTC(1971, 3, 6), y:82, name:'高一第一学期第20次考试'},
{x:Date.UTC(1971, 3, 13), y:84, name:'高一第一学期第21次考试'},
{x:Date.UTC(1971, 4, 3), y:10, name:'高一第一学期第22次考试'},
{x:Date.UTC(1971, 4, 26), y:19, name:'高一第一学期第23次考试'},
{x:Date.UTC(1971, 5, 9), y:25, name:'高一第一学期第24次考试'},
{x:Date.UTC(1971, 5, 12), y:55, name:'高一第一学期第25次考试'}
]
//,type:'column'
}, {
name: '数学',
data: [
{'x':Date.UTC(1970, 9, 18), 'y':45, 'name':'高一第一学期第1次考试'},
{x:Date.UTC(1970, 9, 27), y:29, name:'高一第一学期第2次考试'},
{x:Date.UTC(1970, 11, 1), y:47, name:'高一第一学期第3次考试'},
{x:Date.UTC(1970, 11, 11), y:55, name:'高一第一学期第4次考试'},
{x:Date.UTC(1970, 11, 25), y:38, name:'高一第一学期第5次考试'},
{x:Date.UTC(1971, 0, 8), y:38, name:'高一第一学期第6次考试'},
{x:Date.UTC(1971, 0, 15), y:38, name:'高一第一学期第7次考试'},
{x:Date.UTC(1971, 1, 1), y:38, name:'高一第一学期第8次考试'},
{x:Date.UTC(1971, 1, 8), y:48, name:'高一第一学期第9次考试'},
{x:Date.UTC(1971, 1, 21), y:58 ,name:'高一第一学期第10次考试'},
{x:Date.UTC(1971, 2, 12), y:89, name:'高一第一学期第11次考试'},
{x:Date.UTC(1971, 2, 25), y:70, name:'高一第一学期第12次考试'},
{x:Date.UTC(1971, 3, 4), y:94, name:'高一第一学期第13次考试'},
{x:Date.UTC(1971, 3, 9), y:91, name:'高一第一学期第14次考试'},
{x:Date.UTC(1971, 3, 13), y:75, name:'高一第一学期第15次考试'},
{x:Date.UTC(1971, 3, 19), y:66 ,name:'高一第一学期第16次考试'},
{x:Date.UTC(1971, 4, 25), y:65 ,name:'高一第一学期第17次考试'},
{x:Date.UTC(1971, 4, 31), y:35, name:'高一第一学期第18次考试'},
{x:Date.UTC(1971, 5, 7), y:56, name:'高一第一学期第19次考试'}
]
}, {
name: '语文',
data: [
{x:Date.UTC(1970, 9, 9), y: 0, name:'高一第一学期第1次考试'},
{x:Date.UTC(1970, 9, 14), y:15, name:'高一第一学期第2次考试'},
{x:Date.UTC(1970, 10, 28), y:35, name:'高一第一学期第3次考试'},
{x:Date.UTC(1970, 11, 12), y:46, name:'高一第一学期第4次考试'},
{x:Date.UTC(1971, 0, 1), y:59, name:'高一第一学期第5次考试'},
{x:Date.UTC(1971, 0, 24), y:58, name:'高一第一学期第6次考试'},
{x:Date.UTC(1971, 1, 1), y:62, name:'高一第一学期第7次考试'},
{x:Date.UTC(1971, 1, 7), y:65, name:'高一第一学期第8次考试'},
{x:Date.UTC(1971, 1, 23), y:77, name:'高一第一学期第9次考试'},
{x:Date.UTC(1971, 2, 8), y:77, name:'高一第一学期第10次考试'},
{x:Date.UTC(1971, 2, 14), y:79, name:'高一第一学期第11次考试'},
{x:Date.UTC(1971, 2, 24), y:86, name:'高一第一学期第12次考试'},
{x:Date.UTC(1971, 3, 4), y:80, name:'高一第一学期第13次考试'},
{x:Date.UTC(1971, 3, 18), y:94, name:'高一第一学期第14次考试'},
{x:Date.UTC(1971, 3, 24), y:98, name:'高一第一学期第15次考试'},
{x:Date.UTC(1971, 4, 16), y:39, name:'高一第一学期第16次考试'},
{x:Date.UTC(1971, 4, 21), y: 0, name:'高一第一学期第18次考试'},
]
}]
});
}); </script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script> <div id="container" style="max-width: 800px; height: 400px; margin: 0 auto"></div> </body>
</html>
Highcharts 非常实用的Javascript统计图的更多相关文章
- 【精心推荐】几款实用的 JavaScript 图形图表库
一款好的图表插件不是那么容易找到的.最近项目里需要实现统计图表功能,所以在网上搜罗了一圈,找到一些不错的图表插件,分享大家.众多周知,图形和图表要比文本更具表现力和说服力.这里给大家精心推荐几款实用的 ...
- 12个实用的 Javascript 奇淫技巧
这里分享12个实用的 Javascript 奇淫技巧.JavaScript自1995年诞生以来已过去了16个年头,如今全世界无数的网页在依靠她完成各种关键任务,JavaScript曾在Tiobe发布的 ...
- 几款实用的 JavaScript 图形图表库
一款好的图表插件不是那么容易找到的.最近项目里需要实现统计图表功能,所以在网上搜罗了一圈,找到一些不错的图表插件,分享大家.众多周知,图形和图表要比文本更具表现力和说服力.这里给大家精心推荐几款实用的 ...
- 实用的JavaScript手册
实用的JavaScript手册,收藏了,需要的时候可以翻阅 包含了 什么是JavaScript: JavaScript基础知识: JavaScript内置对象 JavaScript数据类型的操作方法 ...
- 12个十分实用的JavaScript小技巧
12个非常实用的JavaScript小技巧 在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候 ...
- 33个非常实用的JavaScript一行代码
33个非常实用的JavaScript一行代码 一.日期处理 1. 检察日期是否有效 该方法用于检测给出的日期是否有效: const isDateValid = (...val) => !Numb ...
- Highcharts 的使用（各种统计图）（难点：绑定数据）
1.我们先打开 官方下载的 文件包 打开 index.htm 页面 里面有非常多的 统计图. 我是用的是3D charts 中的 3D column 也就是 3D的柱状图. 选择一个 后 会有非常棒的 ...
- 12个实用的 JavaScript 框架分享给前端开发者
JavaScript库是预先编写的 JavaScript 工具代码,让开发者可以更容易开发 JavaScript 应用.这个列表我们列出了2017年1月份功能丰富的 JavaScript 库,可以帮助 ...
- 9个实用的Javascript代码高亮脚本
代码高亮很有用,特别是在需要在网站或者blog中显示自己编写的代码的时候,或者给其他人查看或调试语法错误的时候.我们可以将代码高亮,以便阅读者可以十分方便的读取代码块,增加用户阅读代码的良好体验. 目 ...
随机推荐
- 使用markdown语法撰写csdn博客
在CSDN之下写blog无疑是一件非常吃力的事情,对于非常多simple爱好者来讲,能用markdown语法来书写代码是最优雅简洁只是的了.本文主要介绍markdown语法和怎样它来撰写csdn下的b ...
- UVA 825 Walking on the Safe Side(记忆化搜索)
Walking on the Safe Side Square City is a very easy place for people to walk around. The two-way ...
- [RxJS] Refactoring Composable Streams in RxJS, switchMap()
Refactoring streams in RxJS is mostly moving pieces of smaller streams around. This lessons demonstr ...
- Oracle用户解锁的三种办法及默认的用户与密码
ORA-28000: the account is locked-的解决办法 2009-11-11 18:51 ORA-28000: the account is locked 第1步:使用PL/SQ ...
- 普通用户之间的ssh无密码访问设置方法
两台CentOS6.2服务器,客户端是node1,服务器是node2,先都用root用户配置,方法如下: 第一步:在客户端Node1:生成密匙对,我用的是rsa的密钥.使用命令 "ssh-k ...
- VS2010 ReportViewer导出文件下载保存不能识别文件类型
今天测试项目时,突然发现导出报表下载保存的保存,不能识别文件的类型,文件名称为:.xls[3] 检查代码发现在指定报表路径时多了一个方法: ReportViewer1.LocalReport.Load ...
- iOS 无限轮播图的两种实现
首先说一下实现的思想: 用UIScrollView实现,在scrollView上添加3个UIImageView,分别用来显示上一张图片,当前显示的图片,下一张图片.scrollView在不滑动的时候永 ...
- UVA10305 拓扑排序
网址:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=117863#problem/B 思路分析:裸的拓扑排序,注释在代码中. 代码: #i ...
- QTableWidget简单操作
使用Qt设计师工具,在窗体上添加Table Widget控件,这样就可以使用ui全局变量来调用该控件了. Table Widget控件的应用 (1)设置列数和行数 //设¦¨¨置?列¢D数ºy和¨ª行 ...
- java-web-dom4j解析XML-递归方式
<?xml version="1.0" encoding="UTF-8"?><书架> <书 出版日期="2013-10 ...