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 ...
随机推荐
- 端口扫描软件Nmap使用一（下载于安装）
端口扫描软件Nmap使用一(下载于安装) Nmap的下载地址虽然很多,但是对于新手来说,尽量在官方网址下载,某些第三方下载网址很不人道,使用他们加速器的时候会绑定下载很多垃圾软件,会给我们造成很多不必 ...
- 移动端(手机端)页面自适应解决方案—rem布局篇
移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...
- Hadoop2 伪分布式部署
一.简单介绍 二.安装部署 三.执行hadoop样例并測试部署环境 四.注意的地方 一．简单介绍 Hadoop是一个由Apache基金会所开发的分布式系统基础架构,Hadoop的框架最核心的设计就是: ...
- [React] Pass a function to setState in React
In React, when you want to set the state which calculation depends on the current state, using an ob ...
- 《Java并发编程实战》第五章 同步容器类 读书笔记
一.同步容器类 1. 同步容器类的问题 线程容器类都是线程安全的.可是当在其上进行符合操作则须要而外加锁保护其安全性. 常见符合操作包括: . 迭代 . 跳转(依据指定顺序找到当前元素的下一个元素) ...
- CodeForces 570B Simple Game 概率
原题: http://codeforces.com/contest/570/problem/B 题目: Simple Game time limit per test1 second memory l ...
- 4.angularJS-指令（directive）
转自:https://www.cnblogs.com/best/p/6225621.html 指令(directive)是AngularJS模板标记和用于支持的JavaScript代码的组合.Angu ...
- 21. 【intellij idea】Project Structure 讲解
转自:.https://www.cnblogs.com/zadomn0920/p/6196962.html 项目的左侧面板 项目设置->Project Project Settings -> ...
- avalon 作用域
作用域绑定(ms-controller, ms-important) 如果一个页面非常复杂,就需要划分模块,每个模块交由不同的ViewModel去处理.我们就要用到ms-controller与ms-i ...
- orm 通用方法——QueryModelCount条件查询记录数
定义代码: /** * 描述:根据条件查询对象数 * 作者:Tianqi * 日期:2014-09-17 * param:model 对象实例 * param:cond 查询条件 * return:i ...