根据业务需求，找到了这个很少使用的图形，话不多说，看看该如何使用。首先要引入支持文件：可根据链接下载。
<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>
在项目需求中，x轴要表示24小时之内的状态，不可以使用年月日坐标轴，需要使用时分秒，那么highcharts 怎么设置x轴时间格式？这个问题卡了好久，因为网上没有找到合适的方案，关于Highcharts图表的博客也不是很多，只能自己动手研究了
看完数据交互的文档，心中似乎有了答案，所以说啊，技术万变不离其宗，遇到问题，一定要反复研究api,这里有你想要的一切答案。关于数据交互：如果不懂x轴和y轴数据类型和格式，可以查看数据交互文档
另外
如果要去掉右下角highchart.com和右上角的打印及导出按钮
去掉右下角的highcharts.com需要加入以下内容：
1. credits: { 2. enabled:false 3. },
如果不设置，那么默认为显示。
exporting: { enabled:false },
