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 ...
随机推荐
- 使用express+shell在服务器上搭建一套简单的前端部署系统
前言 个人项目越来越多,部署需要频繁操作服务器,所以手动搭建一套简单的部署系统. 效果如图 其中包含 原生html+css+js项目,单页面react, vue, angular项目,实现了一键打包发 ...
- 使用AJAX实现用户名的唯一性校验（注册界面）-JAVA（新手）
(1)实现用户名的唯一性校验 所需要准备的: Servlet 注册界面的JSP 接口和实现类 所需要的接口和实现类: 接口: /* * 用户注册 * 账号的唯一性校验,需要传参(username) * ...
- java-选中排序（新手）
//排序 选择排序 数组中每个元素都进行比较public class Test { //公共静态的主方法. public static void main(String[] args) { //创建一 ...
- Android UI性能测试——使用 Gfxinfo 衡量性能
Android官方文档翻译 原文地址:https://developer.android.com/training/testing/performance参考:https://www.jianshu. ...
- Web_jQuery
第1章: jQuery简介 为了简化 JavaScript 的开发,一些 JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数,简化HTML与JavaScript之 ...
- angular的性能分析 -随记
$watch 的实现原理和性能分析 只有双向绑定的 scope 才会被加入$watch队列,或者手动绑定$watch的$scope 所有放在 $scope 中的变量或函数都被加入到了$watch队列当 ...
- java实现SSO（SingleSignOn）单点登录服务
单点登录SSO:是指用户通过一次登录,可以访问任意所有相互信任的应用系统.即一处登录,处处登录.比如阿里系下的淘宝.天猫等,虽然是不同的产品,但归于一个体系下,是可以相互信任的应用系统. 为了方便用户 ...
- 基于树莓派与YOLOv3模型的人体目标检测小车（一）
项目介绍: 本科毕业选的深度学习的毕设,一开始只是学习了一下YOLOv3模型, 按照作者的指示在官网上下载下来权重,配好环境跑出来Demo,后来想着只是跑模型会不会太单薄,于是想了能不能做出来个比较实 ...
- Building Applications with Force.com and VisualForce(Dev401)(十九):Visualforce Pages: Visualforce Componets (Tags)
Dev401-020:Visualforce Pages: Visualforce Componets (Tags) Module Agenda1.Tag Basics2.Tag Bindings T ...
- 为什么要在离线A/B测试中使用贝叶斯方法
当涉及到假设检验时,贝叶斯方法可以取代经典的统计方法.这里将使用web分析的具体案例来演示我们的演示. 贝叶斯方法在经典统计中的重要性在此链接. https://towardsdatascience. ...