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 ...
随机推荐
- vscode 调试vue.js程序
npm install -g vue-cli //安装vue-clivue init webpack projectName //创建项目 1.Ctrl+~ 打开命令行 ...
- 容器配置https
生成秘钥库 通过jdk的keytool工具生成秘钥库 keytool -genkeypair -alias "localhost" -keyalg "RSA" ...
- WHU 1552 Seats 枚举
题意: 有一个年级中7个班的n个学生. 一天,他们毫无顺序的站成一排.请计算最小的交换次数,使得 相同班的同学都站在一起. (只有站在一起的人才能交换) 思路: 如果知道班级的最终排列就能在很短的时间 ...
- SCU 1095运送物资(最短路)
SCU 1095运送物资(最短路) X国发生了内战.起义军得到了广大人民的支持.在一次战役中,反动军队结集了大量兵力,围攻起义军的主堡W城.为支援前线,后方各个供给基地城市纷纷准备将物资运往W城.各基 ...
- c#+ArcGIS Engine-获取矢量图层的空间参考
转自原文c#+ArcGIS Engine-获取矢量图层的空间参考 介绍一种简单的获取矢量图层空间参考的方法: 首先打开Shp文件获得FeatureClass,代码如下: string pPath=&q ...
- 隐马尔科夫模型(HMM)
基本概念 1Markov Models 2Hidden Markov Models 3概率计算算法前向后向算法 1-3-1直接计算 1-3-2前向算法 1-3-3后向算法 4学习问题Baum-Welc ...
- hdu 思维风暴
点击打开链接 偶然在杭电上看到的题目,数学题.好像是一道六年级奥赛题目,反正我是没有想出来,也知道往那上面想.就是找不到规律啊.学习了网上的方法, 这道题须要求出来多添加的点,就是与之前每条边添加的点 ...
- 大型网站架构之JAVA中间件
中间件就是在大型网站中,帮助各子模块间实现互相访问,消息共享或统一访问等功能的软件产品.常见的有: 远程服务框架中间件:主要解决各子模块之间互相访问的问题. 消息队列中间件:主要解决各子模之间消息共享 ...
- 智课雅思词汇---七、cur是什么意思
智课雅思词汇---七.cur是什么意思 一.总结 一句话总结:词根:cur, curs ( cor, cour, cours, coars) = to run 1.cub是什么意思? 词根:cumb, ...
- kafka查询topic属性含义
第一行,列出了topic的名称,分区数(PartitionCount),副本数(ReplicationFactor)以及其他的配置(Config.s) Leader:1 表示为做为读写的broker的 ...