Highcharts柱形范围图使用示例
功能需求：统计三种不同的状态在一天的时间段里面所占的范围
第一步：引入highcharts.js和highcharts-more.js文件
引入文件文件源码：下载https://img.hcharts.cn/highcharts/highcharts-more.js
<!-- 引入highcharts.js和highcharts-more.js文件 -->
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="js/highcharts-more.js"></script>
第二步：
<!-- 图表容器 DOM -->
<div id="container" style="width: 600px;height:400px;"></div>
第三步
具体示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三分钟上手Highcharts 图表</title>
</head>
<body>
<!-- 图表容器 DOM -->
<div id="container" style="width: 600px;height:400px;"></div>
<!-- 引入 highcharts.js -->
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="js/highcharts-more.js"></script>
<script>
// 图表配置
var options = {
chart: {
type: 'columnrange', // columnrange 依赖 highcharts-more.js
inverted: true
},
title: {
text: '智能床垫变化范围'
},
subtitle: {
text: '智能床垫'
},
xAxis: {
categories: ['深睡眠', '浅睡眠', '醒着的']
},
yAxis: {
title: {
text: '时间 ( h )'
}
},
tooltip: {
valueSuffix: 'h'
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y + 'h';
}
}
}
},
legend: {
enabled: false
},
series: [{
name: '温度',
data: [
[1, 2],
[2, 5],
[5, 9],
]
}]
};
// 图表初始化函数
var chart = Highcharts.chart('container', options);
</script>
</body>
</html>
测试链接：https://www.hcharts.cn/demo/highcharts/columnrange
Highcharts柱形范围图使用示例的更多相关文章
- highcharts 柱形堆叠图
<!doctype html> <html lang="en"> <head> <script type="text/javas ...
- 可视化操作，实现横向柱形echart图 无边框
图片的实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- Highcharts 柱图 每个柱子外围的白色边框
Highcharts 柱图中每条柱外会有默认白色的边框, 去边框代码如下: plotOptions: { bar: { borderColor: "",//去边框 } }
- HighChartS cpu利用率动态图（Java版）
来源:http://www.cnblogs.com/haifg/p/3217699.html 最近项目需要监控服务器cpu的利用率,并做成动态图.在网上查找了一些资料,最终选择了HighChart ...
- [Swift通天遁地]三、手势与图表-(12)创建复合图表：包含线性图表和柱形图表
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- HighCharts之2D面积图
HighCharts之2D面积图 1.HighCharts之2D面积图源码 <!DOCTYPE html> <html> <head> <meta char ...
- HighCharts之2D折线图
HighCharts之2D折线图 1.HighCharts之2D折线图源码 line.html: <!DOCTYPE html> <html> <head> < ...
- HighCharts之2D金字塔图
HighCharts之2D金字塔图 1.实例源码 Pyramid.html: <!DOCTYPE html> <html> <head> <meta char ...
- HighCharts之2D半圆环图
HighCharts之2D半圆环图 1.实例源码 HalfDonut.html: <!DOCTYPE html> <html> <head> <meta ch ...
随机推荐
- caioj 1412 动态规划3：a+b问题(完全背包方案数)
每个素数就是一个物品,然后就相当于求完全背包方案数 把max改成+就好了. #include<cstdio> #include<vector> #include<cstr ...
- 紫书 习题 10-14 UVa 10886（暴力+数据范围）
开始的时候一看这题感觉很难,觉得肯定有什么很快的办法 不能暴力做(受了上一题10-13的影响) 然后一看那个函数感觉无从下手. 然后看了博客发现,原来这道题就是直接暴力-- 因为n的范围为10的7次方 ...
- OpenCV图像处理篇之腐蚀与膨胀
转载请注明出处:http://xiahouzuoxin.github.io/notes 腐蚀与膨胀 腐蚀和膨胀是图像的形态学处理中最主要的操作,之后遇见的开操作和闭操作都是腐蚀和膨胀操作的结合运算. ...
- Metasploit - Tips for Evading Anti-Virus
绕过杀毒软件,有很多钟方法.此处介绍一种,编写python程序调用shellcode,并使用Pyinstaler将python程序编译为exe程序. 准备工作:(Windows XP环境下编译) 将P ...
- Android入门篇（一）Androidproject的搭建，导入与导出，图标的改动
先说一些题外话吧.这是小珂同学的处女作.可能写的不好,请各位读者见谅.我先讲讲我为什么要写博文,那应该也是机缘巧合,有一次.我问学长一个问题,学长发了一个连接给我,里面是一篇博客.那时我仅仅是看 ...
- POJ 1611 The Suspects 并查集 Union Find
本题也是个标准的并查集题解. 操作完并查集之后,就是要找和0节点在同一个集合的元素有多少. 注意这个操作,须要先找到0的父母节点.然后查找有多少个节点的额父母节点和0的父母节点同样. 这个时候须要对每 ...
- FSM之三--代码风格
FSM设计之一http://www.cnblogs.com/qiweiwang/archive/2010/11/28/1890244.html Moore型状态机与mealy型状态机相比,由于其状态输 ...
- 19.浏览器Window服务（$window）
转自:https://www.cnblogs.com/best/tag/Angular/ 引用浏览器的window对象.默认浏览器的window是全局的根对象. 示例代码: <!DOCTYPE ...
- web.config添加identity impersonate="true"导致拒绝访问
例:<identity impersonate="tr" userName="AD\name" password="word"/> ...
- 昼猫笔记 -- 面向对象(II) - 继承
继承 由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念. 所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现,还有就是js可以 ...