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 ...
随机推荐
- iview-admin里面的 axios 给包装了一层数据 libs/axios.js 数据做了一层拦截
interceptors (instance, url) { // 请求拦截 instance.interceptors.request.use(config => { // 添加全局的load ...
- Elasticsearch 之聚合分析入门
本文主要介绍 Elasticsearch 的聚合功能,介绍什么是 Bucket 和 Metric 聚合,以及如何实现嵌套的聚合. 首先来看下聚合(Aggregation): 什么是 Aggregati ...
- Natas19 Writeup（Session登录，常见编码，暴力破解）
Natas19: 提示,与上一题源码类似,只是PHPSESSID不连续.随便输入username和password,抓包观察PHPSESSID,发现是输入的信息,按照id-username的格式,由a ...
- Caused by: java.lang.IllegalArgumentException
Caused by: java.lang.IllegalArgumentException 是因为jdk较高而项目需要的是低版本的问题 1.将idea或idea里的语言级别调到适合自己项目的版本比如安 ...
- 如何在Linux系统上安装nginx
安装Nginx 下载Nginx 到官网http://nginx.org/下载对应nginx包,推荐使用稳定版本进入官网之后界面如下 点击download进行到下一页 然后下载所需要的版本(强烈建议 ...
- effective-java学习笔记---静态工厂方法替代构造方法
使用静态方法的优点: 1.它们是有名字的,生成的客户端代码更易阅读. 如:返回素数的静态方法 BigInteger.probablePrime 2.与构造方法不同,它们不需要每次调用时都创建一个对象. ...
- 微服务交付至kubernetes流程
目录 1.微服务简介 2.K8s部署微服务考虑的问题 3.项目迁移到k8s流程 1.微服务简介 微服务优点 服务组件化 每个服务独立开发.部署,有效避免一个服务的修改引起整个系统重新部署 技术栈灵活 ...
- 深度学习论文TOP10，2019一季度研究进展大盘点
9012年已经悄悄过去了1/3. 过去的100多天里,在深度学习领域,每天都有大量的新论文产生.所以深度学习研究在2019年开了怎样一个头呢? Open Data Science对第一季度的深度学习研 ...
- 83 项开源视觉 SLAM 方案够你用了吗？
作者:吴艳敏 来源:83 项开源视觉 SLAM 方案够你用了吗? 前言 1. 本文由知乎作者小吴同学同步发布于https://zhuanlan.zhihu.com/p/115599978/并持续更新. ...
- Java 注解 So Easy!!!
Java注解 Annotations, a form of metadata, provide data about a program that is not part of the program ...