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中显示自己编写的代码的时候,或者给其他人查看或调试语法错误的时候.我们可以将代码高亮,以便阅读者可以十分方便的读取代码块,增加用户阅读代码的良好体验. 目 ...
随机推荐
- OpenMp 基本
OpenMp是由OpenMP Architecture Review Board牵头提出的,并已被广泛接受的,用于共享内存并行系统的多线程程序设计的一套指导性的编译处理方案(Compiler Di ...
- C# 中文转拼音类
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace SU { ...
- sql两个表联合更新
update TableA set id=TableB.id from TableA,TableB where TableA.name=TableB.name
- js迭代器模式
在迭代器模式中,通常有一个包含某种数据的集合的对象.该数据可能储存在一个复杂数据结构内部,而要提供一种简单 的方法能够访问数据结构中的每个元素. 实现如下: //迭代器模式 var agg = (fu ...
- 条形码/二维码之开源利器ZXing图文介绍
全文目录: 基本介绍 二维码(比如:QRCode)的编码和解码演示 条形码(比如:EAN-13)的编码和解码演示 [一]. 基本介绍 : 1-1. ZXing是一个开源Java类库用于解析多种格式的条 ...
- JSP EL
一.JSP EL语言定义 E L(Expression Language) 目的:为了使JSP写起来更加简单. 表达式语言的灵感来自于 ECMAScript 和 XPath 表达式语言,它提供了在 ...
- php的一些小笔记-文件函数（2）
---恢复内容开始--- copy 文件的复制 echo copy('test.php','test1.php'); 如果成功的返回true,反之返回false 如何在多层目录中复制文件呢?也就是根据 ...
- Nutshell.ThreadWorkerPool .Net线程池设计
功能描述: 支持创建多个线程池,并统一管理 支持不同线程池的容量控制,以及最少活动线程的设置 支持不同线程池中活动线程的闲时设置,即线程空闲时间到期后即自动被回收 结构设计: ThreadWorker ...
- BZOJ 1502 月下柠檬树(simpson积分)
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1502 题意:给出如下一棵分层的树,给出每层的高度和每个面的半径.光线是平行的,与地面夹角 ...
- 《Programming WPF》翻译 第6章 2.资源与样式
原文:<Programming WPF>翻译 第6章 2.资源与样式 WPF的样式机制以来于资源体系来定位样式.正如你在第5章看到的,样式在元素的资源片段中定义,而且样式通过其名字被引用, ...