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 ...
随机推荐
- watch 同步表单 记得$nextTick，否则不会同步更新到组件内
watch 同步表单 记得$nextTick,否则不会同步更新到组件内 watch: { 'formData.aaa' (val) { this.$nextTick(() => { this.f ...
- SpringMVC框架——转发与重定向
网上摘取一段大神总结的转发与重定向的区别,如下: 转发(服务端行为) 形式:request.getRequestDispatcher().forward(request,response) 转发在服务 ...
- flex弹性盒子实现微博页面
结果图: 源代码: html部分: <!DOCTYPE html><html lang="en"><head> <meta charset ...
- [Docker01] The Docker Road
The Docker Road Docker是什么? Docker是docker容器为资源分隔和调度的基本单位,封装整个软件运行时环境,为开发者和系统管理员设计的,用于构建,发布和运行分布式应用的平台 ...
- 如何在Linux系统上安装nginx
安装Nginx 下载Nginx 到官网http://nginx.org/下载对应nginx包,推荐使用稳定版本进入官网之后界面如下 点击download进行到下一页 然后下载所需要的版本(强烈建议 ...
- Linux Ubuntu 开发环境配置 ——最具生产力工具一览
Why Linux and Why exactly Ubuntu 首先这里就不做Mac,Linux,Windows三者之争了.只从个人角度分析下: Mac 不差钱(其实Mac作为超级本性价还行),不喜 ...
- CMD 基础命令
基本命令 1.编译.java文件成.class:找到文件所在路径 --> java -d . 文件名称.java --> javac -d . 文件名称.java : 2.ping URL ...
- 在dev分支上修改了文件，但是并没有执行git add. 和git commit命令，然后切换到master分支，仍然能看到dev分支的改动现象
当我们创建一个新的分支dev,并且在新分支上修改了原文件,在我们没有提交到仓库的前提下,将分支再切换到master分支上,执行git status ,可以看到dev操作的状态: (1)因为未add的内 ...
- SVM多核学习方法简介
作者:Walker SVM是机器学习有监督学习的一种方法,常用于解决分类问题,其基本原理是:在特征空间里寻找一个超平面,以最小的错分率把正负样本分开.因为SVM既能达到工业界的要求,机器学习研究者又能 ...
- 两行代码统计模型参数量与FLOPs，这个PyTorch小工具值得一试
你的模型到底有多少参数,每秒的浮点运算到底有多少,这些你都知道吗?近日,GitHub 开源了一个小工具,它可以统计 PyTorch 模型的参数量与每秒浮点运算数(FLOPs).有了这两种信息,模型大小 ...