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 ...
随机推荐
- ajax+h5实现文件上传，成功即显示缩略图。
官方参考文档: http://fex.baidu.com/webuploader/ 文件下载地址: https://github.com/fex-team/webuploader/releases/d ...
- SweetAlert的入门
在做后台管理系统,在用户交互这块(弹窗.提示相关),用了一款还不错的插件SweetAlert(一款原生js提示框,允许自定义,支持设置提示框标题.提示类型.确认取消按钮文本.点击后回调函数等等), 效 ...
- HDU 4928 Series 2
有了题解以后这题就成了一个模拟题.不过写了好久才把它写对…… Sad #include <iostream> #include <cstdio> #include <cs ...
- linux学习之多高并发服务器篇（一）
高并发服务器 高并发服务器 并发服务器开发 1.多进程并发服务器 使用多进程并发服务器时要考虑以下几点: 父最大文件描述个数(父进程中需要close关闭accept返回的新文件描述符) 系统内创建进程 ...
- 网页加速之Chromium 预载入 Prerendering
前一篇博文已经介绍通过prefetch预先载入网页的资源来提升网页载入速度,以下我们一起来看一下网页加速之chromium prerendering.在介绍prerendering之前,先介绍两个概念 ...
- Option可选值（一）
//: Playground - noun: a place where people can play import Cocoa class Person { var residence: Resi ...
- ListView阻尼效果
效果图省略.. . activity_main.xml(仅仅有一个自己定义ListView) <RelativeLayout xmlns:android="http://schemas ...
- iBatis框架使用 4步曲
iBatis是一款使用方便的数据訪问工具,也可作为数据持久层的框架.和ORM框架(如Hibernate)将数据库表直接映射为Java对象相比.iBatis是将SQL语句映射为Java对象. 相对于全自 ...
- vue6 发请求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 29.AngularJS 简介
转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 H ...