Highcharts 甘特图

 

Highcharts.chart('container', {
            chart: {
                type: 'xrange'
            },
            title: {
                text: '生产模拟'
            },
            xAxis: {
                gridLineWidth: 1,
                type: 'datetime',
                minRange: 2 * 3600000,//最小间隔
                tickInterval: 2 * 60 * 60 * 1000,
                dateTimeLabelFormats: {
                    hour: '%H:%M' //横坐标显示内容
                }
            },
            yAxis: {
                title: {
                    text: ''
                },
                categories: ['计划', '推测', '实际', '计划', '实际', '计划', '实际', '计划', '实际', '计划', '实际', '实际',],
                reversed: true,
                //alternateGridColor: '#FDFFD5'
                plotBands: [  { // Gentle breeze
			        from: -0.5,
			        to: 2.5,
			        color: 'rgba(68, 170, 213, 0.1)',
		            }, { // Moderate breeze
			            from: 2.5,
			            to: 8.5,
			            color: '#FDFFD5',
		            }, { // Fresh breeze
			            from: 8.5,
			            to: 12,
			            color: '#F3F3FA',
		            }]
                },
            series: [{
                showInLegend: false,
                name: '',
                pointWidth: 25,
                data: [{x: Date.UTC(2018, 8, 28,4,0,0,0),x2: Date.UTC(2018, 8, 28,24,0,0,0),y: 5,color: '#d8d8d8',name:'<span style=color:black;>1<span>',url:'<img src=https://www.highcharts.com/demo/gfx/sun.png width=15px>'}],
                dataLabels: {
                    useHTML:true,//执行html
                    formatter: function (
			        ) {
				        return this.point.name + this.point.url;//显示名称和图片
			        },
                    enabled: true
                }
            }]
        });