Highcharts柱形范围图使用示例

功能需求：统计三种不同的状态在一天的时间段里面所占的范围

图片.png

第一步：引入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.jsinverted: 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

原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

转载于:https://www.cnblogs.com/wangting888/p/9701337.html

Highcharts柱形范围图使用示例相关推荐

计算机电子表格三维簇状柱形图怎么设置,Excel中怎么制作柱形对比图【excel表格数据生成柱形图】...
怎么创建Excel簇状柱形图并设置图表的格第一步:插入---图表----选择"簇状柱形图" 在图表区域右击---选择数据-----点击" "号-----选择系 ...
echarts + vue 实现项目进度不同颜色柱形甘特图
template 里代码 <div class="demo><div class="chart-title"><i class=" ...
vue3+echarts绘制横向柱形进度图
样式入上图,这个真是费劲啊(可能由于本人较菜),图片已经转成svg,如果有本地的图片可按照注释方式去引入 option = {// backgroundColor: 'transparent',gri ...
matplotlib画柱状对比图
背景有两组数据,用柱状图表示出两组数据之间的差异代码 import numpy as np from matplotlib import pyplot as plt ''' 柱形对比图共有11组 ...
glide加载gif图不显示动画_用Python绘制会动的柱形竞赛图
我们经常看到的Bar Chart Race(柱形竞赛图),可以看到数据的呈现非常的直观.今天就一起来学习下如何生成和上面一样的柱形竞赛图. 1.导入Python库 2.加载数据集这里使用的是城市人口 ...
（译）stackoverflow上关于柱形全景与立方体全景转换的讨论
2019独角兽企业重金招聘Python工程师标准>>> 提问: @ WestLangley: 我正在给某网站开发一个简单的3D全景浏览功能.考虑到移动端的性能,我使用了three.j ...
用python绘制柱状图标题-使用Python绘制柱形竞赛图
我们经常看到的Bar Chart Race(柱形竞赛图),可以看到数据的呈现非常的直观.今天就一起来学习下如何生成和上面一样的柱形竞赛图. 1.导入Python库 Python 1 2 3 4 5im ...
python 分布图_python数据分布型图表柱形分布图系列带误差线的柱形图
柱形分布图系列柱形分布图系列使用柱形图的方式展示数据的分布规律: 可以借助误差线或散点图: 带误差线的柱形图就是使用每个类别的均值作为柱形的高度: 再根据每个类别的标准差绘制误差线: 缺点:无法显 ...
使用 D3.js 创建柱状堆积图
柱状堆积图项目地址使用 D3.js 创建的图表: 使用 D3.js 创建根据值域颜色渐变的地图 D3.js 中动态计算 x 轴 y 轴的宽度以及偏移量在 Ember.js 项目中由浅入深使用 D ...
利用Word域代码实现将形如“图一-1”的题注修改为“图1-1”
利用Word域代码实现将形如"图一-1"的题注修改为"图1-1" 憧憬少欢迎访问我的个人博客:yxchangingself.xyz 42 人赞同了该文章目录 ...

Highcharts柱形范围图使用示例

Highcharts柱形范围图使用示例相关推荐

最新文章

热门文章