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
}
}]
});