根据业务需求，找到了这个很少使用的图形，话不多说，看看该如何使用。首先要引入支持文件：可根据链接下载。
exporting.js：https://img.hcharts.cn/highcharts/modules/exporting.js
xrange.js：https://img.hcharts.cn/highcharts/modules/xrange.js
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="js/exporting.js"></script>
<script src="js/xrange.js"></script>具体示例代码如下：
<!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/exporting.js"></script><script src="js/xrange.js"></script><script>// 图表配置var options = {chart: {type: 'xrange'},title: {text: '简易甘特图'},xAxis: {type: 'datetime',dateTimeLabelFormats: {week: '%Y/%m/%d'}},yAxis: {title: {text: ''},categories: ['深睡眠', '浅睡眠', '醒着的'],reversed: true},tooltip: {dateTimeLabelFormats: {day: '%Y/%m/%d'}},series: [{name: '睡眠检测',// pointPadding: 0,// groupPadding: 0,borderColor: 'gray',pointWidth: 20,data: [{x: Date.UTC(2014, 10, 21),x2: Date.UTC(2014, 11, 2),y: 0,partialFill: 0.25}, {x: Date.UTC(2014, 11, 2),x2: Date.UTC(2014, 11, 5),y: 1}, {x: Date.UTC(2014, 11, 8),x2: Date.UTC(2014, 11, 9),y: 2}, {x: Date.UTC(2014, 11, 9),x2: Date.UTC(2014, 11, 19),y: 1}, {x: Date.UTC(2014, 11, 10),x2: Date.UTC(2014, 11, 23),y: 2}],dataLabels: {enabled: true}}]};// 图表初始化函数var chart = Highcharts.chart('container', options);</script></body></html>
图片.png
在线测试：https://www.hcharts.cn/demo/highcharts/x-range
在项目需求中，x轴要表示24小时之内的状态，不可以使用年月日坐标轴，需要使用时分秒，那么highcharts 怎么设置x轴时间格式？这个问题卡了好久，因为网上没有找到合适的方案，关于Highcharts图表的博客也不是很多，只能自己动手研究了
看完数据交互的文档，心中似乎有了答案，所以说啊，技术万变不离其宗，遇到问题，一定要反复研究api,这里有你想要的一切答案。关于数据交互：如果不懂x轴和y轴数据类型和格式，可以查看数据交互文档
https://www.hcharts.cn/docs/basic-series
另外
如果要去掉右下角highchart.com和右上角的打印及导出按钮
图片.png
去掉右下角的highcharts.com需要加入以下内容：
credits: {enabled:false},
如果不设置，那么默认为显示。
exporting: {enabled:false},
图片.png
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
 链表的删除-相关题型总结（6题）](https://img-blog.csdnimg.cn/img_convert/df571b58a7e56ec80adacb732c6812b6.png)