Highcharts甘特图

根据业务需求，找到了这个很少使用的图形，话不多说，看看该如何使用。首先要引入支持文件：可根据链接下载。
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>

Highcharts甘特图

在线测试：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和右上角的打印及导出按钮
Highcharts甘特图

去掉右下角的highcharts.com需要加入以下内容：

    credits: {
              enabled:false
    },

如果不设置，那么默认为显示。

    exporting: {
                enabled:false
    },

Highcharts甘特图

原文作者：祈澈姑娘
关注「编程微刊」公众号，在微信后台回复「领取资源」，获取IT资源300G干货大全。