我在使用highCharts的曲线图,柱状图时,都没有任何问题,但是在使用甘特图时,控制台报错
missingModuleFor: xrange"
很明显是缺少甘特图的文件,问题是该怎么引入呢?
引入特殊图表,解决办法来自于这篇博客:参考博客
效果图:
参考option:
ganttOption: {
chart: {
backgroundColor: '#2d364b',
type: 'xrange'
},
title: {
text: ''
},
time: {
useUTC: false
},
xAxis: {
opposite: true,
type: 'datetime',
lineColor: '#525E89',
tickColor: '#525E89',
lineWidth: 1,
labels: {
style: {
color: '#7F88AA'
}
}
},
yAxis: {
gridLineColor: 'transparent',
title: {
text: ''
},
labels: {
style: {
color: '#7F88AA'
}
},
categories: ['工作', '停机', '故障', '断网'],
reversed: true
},
credits: {
enabled: false// 隐藏右下角水印
},
tooltip: {
headerFormat: '<span style="font-size: 10px">{point.x:%Y/%m/%d %H:%M:%S} - {point.x2:%Y/%m/%d %H:%M:%S}</span><br/>'
},
legend: {
enabled: false
},
plotOptions: {
series: {
animation: false
}
},
series: [{
name: '设备运行状态',
borderColor: 'gray',
pointWidth: 10,
borderRadius: 0,
borderWidth: 0,
data: [{
x: 1620457337168,
x2: 1620457338168,
y: 0
},{
x: 1620457338168,
x2: 1620457339168,
y: 1
},{
x: 1620457339168,
x2: 1620457340168,
y: 2
}],
dataLabels: {
enabled: true
}
}]
}