Highcharts图表库
Highcharts图表库
1、相关网址：
1）官方主页：https://www.hcharts.cn/
2）Highcharts演示：https://www.hcharts.cn/demo/highcharts
3）下载中心：https://www.hcharts.cn/download
2、查看源代码
1）在图表演示页面找到需要的图表点击进入具体演示图
2）将代码中的数据改为需要的数据代码可以直接使用
3、使用实例
1）条形图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="addSeries()" value="添加一个人">
<input type="button" onclick="updateItem()" value="更新一个值"> <div id="container" style="width: 600px;height:400px;"></div> <script src="/static/js/highcharts.js"></script>
<script src="/static/js/highcharts-zh_CN.js"></script> <script>
var options = {
chart: {
type: 'bar' //指定图表的类型，默认是折线图（line）
},
title: {
text: '我的第一个图表' // 标题
},
xAxis: {
categories: ['苹果', '香蕉', '橙子'] // x 轴分类
},
yAxis: {
title: {
text: '吃水果个数' // y 轴标题
}
},
series: [{ // 数据列
name: '小明', // 数据列名
data: [1, 0, 4] // 数据
}, {
name: '小红',
data: [5, 7, 3]
}]
};
// 图表初始化函数
var chart = Highcharts.chart('container', options); function addSeries() {
chart.addSeries({name: '小刘', data: [30.4, 10.1, 9]});
}
function updateItem() {
chart.series[0].data[0].update(6);
} </script>
</body>
</html>
2）折线图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="addSeries()" value="添加一个人">
<input type="button" onclick="addItem()" value="添加一个值">
<input type="button" onclick="updateItem()" value="更新一个值">
<input type="button" onclick="delItem()" value="删除一个值">
<input type="button" onclick="delSeries()" value="删除一个人"> <div id="container" style="width: 600px;height:400px;"></div> <script src="/static/js/highcharts.js"></script>
<script src="/static/js/highcharts-zh_CN.js"></script>
<script>
var options = {
title: {
text: '我的第一个图表' // 标题
},
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.value);
},
rotation: 30
} },
yAxis: {
title: {
text: '吃水果个数' // y 轴标题
}
},
series: [{ // 数据列
name: '小明', // 数据列名
data: [
[1501689804077.358, 1.0],
[1501689814077.358, 8.0],
[1501689824077.358, 3.0]
] // 数据
},
{
name: '小赵',
data: [
[1501689814077.358, 8.0],
[1501689819077.358, 18.0],
[1501689825077.358, 4.0]
] // 数据
}
]
};
// 图表初始化函数
var chart = Highcharts.chart('container', options); function addSeries() {
chart.addSeries({
name: '小刘', data: [
[1501689814077.358, 18.0],
[1501689819077.358, 8.0],
[1501689825077.358, 3.0]
]
});
}
function updateItem() {
//$('#id1').highcharts()
chart.series[0].data[0].update(66);
}
function addItem() {
chart.series[0].addPoint([1501689825077, 18]);
} function delItem() {
chart.series[0].data[1].remove();
}
function delSeries() {
chart.series[0].remove(false);
} </script>
</body>
</html>
3）3d柱状图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="addSeries()" value="添加一个人">
<input type="button" onclick="addItem()" value="添加一个值">
<input type="button" onclick="updateItem()" value="更新一个值">
<input type="button" onclick="delItem()" value="删除一个值">
<input type="button" onclick="delSeries()" value="删除一个人"> <div id="container" style="width: 600px;height:400px;"></div> <script src="/static/js/highcharts.js"></script>
<script src="/static/js/highcharts-3d.js"></script>
<script src="/static/js/highcharts-zh_CN.js"></script>
<script>
var options = {
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
viewDistance: 25,
depth: 40
},
marginTop: 80,
marginRight: 40
},
title: {
text: '以姓名划分的水果消费总量'
},
xAxis: {
categories: ['1月', '2月', '3月', '4月', '5月', '6月']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: '水果数量'
}
},
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} '
},
plotOptions: {
column: {
//stacking: 'normal',
//depth: 40
}
},
series: [{
name: '小张',
data: [5, 3, 4, 7, 2]
}, {
name: '小王',
data: [3, 4, 4, 2, 5]
}, {
name: '小彭',
data: [2, 5, 6, 2, 1]
}, {
name: '小潘',
data: [3, 0, 4, 4, 3]
}]
};
// 图表初始化函数
var chart = Highcharts.chart('container', options); function addSeries() {
chart.addSeries({
name: '小刘', data: [5, 3, 4, 7, 2]
});
}
function updateItem() {
//$('#id1').highcharts()
chart.series[0].data[0].update(18);
}
function addItem() {
chart.series[0].addPoint(18);
} function delItem() {
chart.series[0].data[1].remove();
}
function delSeries() {
chart.series[0].remove(false);
} </script>
</body>
</html>
4）实时刷新曲线图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="container" style="width: 600px;height:400px;"></div> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="/static/js/highstock.js"></script>
<script src="/static/js/highcharts-zh_CN.js"></script> <script>
Highcharts.setOptions({
global: {
useUTC: false
}
});
function activeLastPointToolip(chart) {
var points = chart.series[0].points;
chart.tooltip.refresh(points[points.length -1]);
}
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0],
chart = this;
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
activeLastPointToolip(chart)
}, 1000);
}
}
},
title: {
text: '动态模拟实时数据'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: '值'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: '随机数据',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
}, function(c) {
activeLastPointToolip(c)
}); </script> </body>
</html>
Highcharts图表库的更多相关文章
- highcharts 图表库的简单使用
Highcharts简介: Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图 ...
- highCharts入门-强大的图表库插件
简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业 ...
- Highcharts纯js图表库，以后可以跟客户说，你跟阿里云ECS用的图表库是同款
Highcharts是一款纯javascript编写的图表库,能够很简便的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图.柱状图.饼图.散点图等多达18 ...
- 关于highcharts(功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库)
官网http://www.hcharts.cn/ 引入下列文件 <script type="text/javascript" src="http://cdn.hch ...
- 在AngularJS中的使用Highcharts图表控件
一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...
- 11个很棒的 jQuery 图表库
如果你曾经使用过任何类型的数据,你应该知道阅读一排排数据的痛苦.通过所有这些数据弄清楚他们的意思是非常不容易的.可视化对于解决这个问题起到了重要的作用.可视化降低了数据阅读的难度,帮助决策者获得可操作 ...
- 转：Highcharts图表控件的使用
摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...
- highCharts图表应用-实现多种图表的显示
在数据统计和分析业务中,有时需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.highCharts可以轻 ...
- highCharts图表入门简介
一.Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在W ...
随机推荐
- oracle中pl/sql 练习题----输入部门编号，在控制台打印这个部门的名称，总人数，平均工资（基本工资+奖金）
一. 思路:声明record类型的变量,根据 多表联合查询查出想要的数据,最后输出. 二.注意:record类型不一定只是一个表中的数据,也可以声明不同表中的数据类型. 三.语句如下: declare ...
- Python-文件操作-之优化购物车
#此次购物车优化,主要使用了文件操作的相关方法,有买家入口,和商家入口 一.买家入口 1.买家第一次启动程序输入金额,金额会记录到文件里,再登录就读取文件里保存的金额,买家可以购买商品,按 ‘q’ 退 ...
- 洛谷1363 幻象迷宫dfs
题目网址:https://www.luogu.com.cn/problem/P1363 迷宫是无限多块地图拼接而成的,问是否可以在迷宫中走无限远.解决方案是dfs,走出初始地图之后的位置映射到原位置( ...
- Smallest Range II
2020-01-21 21:43:52 问题描述: 问题求解: 这个题目还是有点难度的,感觉很巧妙也很难想到. 整体的思路如下: 1. 首先原问题等价于 +0 / + 2*K 2. 那么res = M ...
- Android通知栏前台服务
一.前台服务的简单介绍 前台服务是那些被认为用户知道且在系统内存不足的时候不允许系统杀死的服务.前台服务必须给状态栏提供一个通知,它被放到正在运行(Ongoing)标题之下--这就意味着通知只有在这个 ...
- 上Github，北大、清华、浙大、中科大4大名校课程在线学，加星总数超1.8万
[导读]因为大学生找课程资料很麻烦,直到有人把搜集到的资料放在了Github上!现在,你不光都可以自由免费的获取北大.清华.浙大.中科大的相关课程资源进行自学,也可以对资源进行补充. 读过大学的人,对 ...
- UVA11987 Almost Union-Find 并查集的节点删除
题意: 第一行给出一个n,m,表示 n个集合,里面的元素为1~n,下面有m种操作,第一个数为 1 时,输入a,b 表示a,b 两个集合合并到一起,第一个数为 2 时,输入a,b表示将 a 从他原来的集 ...
- centos7单机安装kafka
基础要求操作系统:CentOS 7x 64位 kafka版本:kafka_2.11-0.8.2.1 #安装使用的jdk以及kafka的包我放到百度云了,需要自取. # 链接:https://pan.b ...
- coding++：error 阿里云 Redis集群一直Waiting for the cluster to join....存在以下隐患
1):Redis集群一直Waiting for the cluster to join... 再次进行连接时首先需要以下操作 1.使用redis desktop Manager连接所有节点 调出命令窗 ...
- ElasticSearch 9200 9300 端口
9300端口: ES节点之间通讯使用 9200端口: ES节点 和 外部 通讯使用 9300是TCP协议端口号,ES集群之间通讯端口号 9200端口号,暴露ES RESTful接口端口号