我创建了一个 x 范围图表来表示一些范围。我想将 x 轴和 y 轴都设为 DateTime 类型。目前,x 和 y 轴都是数字。我创建了一个小提琴来展示我当前的行为。
如何制作 x 和轴 DateTime 类型?
https://jsfiddle.net/bonyfus/t4vz0Lkw/
Highcharts.chart('container', {
chart: {
type: 'xrange',
animation: false,
inverted: true
},
credits: false,
exporting: false,
title: {
text: 'Highcharts X-range'
},
plotOptions: {
series: {
pointPadding: 0,
pointWidth: 20,
borderWidth: 0,
borderRadius: 0,
grouping: false,
},
},
xAxis: {
gridLineWidth: 1,
reversed: false,
tickInterval: 1,
startOnTick: true,
endOnTick: true,
min: 0,
max: 23,
title: {
text: 'Hours',
}
},
yAxis: {
min: 0,
max: 7,
tickInterval: 1,
tickWidth: 1,
gridLineWidth: 1,
endOnTick: false,
startOnTick: false,
reversed: false,
title: {
text: 'Days',
}
},
legend: {
useHTML: true,
y: 0,
enabled: true,
floating: false,
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
symbolWidth: 30,
symbolHeight: 22,
symbolRadius: 0,
squareSymbol: false,
borderWidth: 0,
itemDistance: 10,
itemMarginBottom: 6,
itemStyle: {
fontSize: '12px',
fontWeight: 'normal',
textAlign: 'center',
padding: '0px',
opacity: 1,
},
itemHoverStyle: {
opacity: 1,
fontWeight: 'bold',
},
itemHiddenStyle: {
opacity: 0.7
},
},
series: [{
name: 'Drilling',
data: [{
x: 0.01,
x2: 0.04,
y: 1,
color: 'blue',
},
{
x: 20,
x2: 23,
y: 1,
color: 'blue',
},
],
dataLabels: {
enabled: true
}
},
{
name: 'Tripping',
data: [{
x: 10,
x2: 15,
y: 5,
}, ],
dataLabels: {
enabled: true
}
},
{
name: 'Sliding',
data: [{
x: 15,
x2: 20,
y: 5,
color: 'green',
}, ],
dataLabels: {
enabled: true
}
},
{
name: 'Circulating',
data: [{
x: 20,
x2: 23,
y: 5,
color: 'purple',
},
{
x: 20,
x2: 23,
y: 6,
color: 'purple',
}
],
dataLabels: {
enabled: true
}
}
]
});