У нас есть диаграмма, которая отображает несколько рядов одновременно.
Есть основной ряд y (тип линии), который будет иметь основные показания данных.Существует также возможность установить два разных «уровня» (типы линий) на оси Y.Есть также варианты иметь несколько дополнительных стержней оси Y (типы стержней).С осью X в качестве даты и времени
Вот как выглядит типичный пример диаграммы с действительной датой для данного диапазона
Это работаеткак и ожидалось.У нас есть основной ряд y как средняя температура воздуха (левая ось y). Затем у нас есть два столбца, один для осадков и один для орошения (правая ось y), а затем два «уровня», один красный и один синий..
Это все замечательно.Однако, когда мы перейдем к диапазону дат в будущем, когда нет данных о температуре воздуха, мы получим следующее Обратите внимание, что дата начала - за 2 дня до диапазона дат, и конецдата выглядит равным расстоянию от конца «уровней»
Интересно, что если мы уберем бары, мы получим следующее Теперь это показывает, что «уровни» охватывают всю ширинуграфик
Если мы удалим линии и будем иметь только столбцы, то получим следующее (как оно должно выглядеть, но с «уровнями»)
Кажется, что здесь есть что-то, что вызывает конфликт, когда есть несколько y-серий без основной y-серии.
Я устанавливаю xAxis.setExtremes для даты начала и окончаниядиапазон дат, на который мы смотрим, но кажется, что он ничего не делает.
Вот конфиг;
{
"chart": {
"type":"line",
"animation": {
"duration":150
},
"events":{}
},
"credits":{
"enabled":false
},
"title":{
"text":""
},
"subtitle":{
"text":""
},
"tooltip":{
"shared":true,
"crosshairs":true,
"borderWidth":0,
"followPointer":true,
"useHTML":true,
"headerFormat":"<span style=\"font-size: 10px;\">{point.key}</span><br><br>"
},
"xAxis":[
{
"id":"x-axis",
"type":"datetime",
"crosshair":{
"snap":false
},
"title":{
"text":"25th Sep 2019 - 1st Oct 2019",
"margin":15
}
}
],
"yAxis":[
{
"id":"y-axis-sensors",
"title":{
"text":"ºC"
},
"reversed":false,
"visible":true,
"endOnTick":false,
"startOnTick":false,
"alignTicks":false
},
{
"id":"y-axis-moisture",
"title":{
"text":"mm"
},
"opposite":true,
"min":0,
"endOnTick":false,
"startOnTick":false,
"alignTicks":false,
"tickWidth":0,
"gridLineWidth":0
}
],
"series":[
{
"type":"line",
"yAxis":"y-axis-sensors",
"marker":{
"enabled":false
},
"lineWidth":1,
"animation":false,
"name":"Full",
"seriesGroup":"levelSeries",
"id":"series-level-range-full",
"color":"#31B5E0",
"showInLegend":false,
"states":{
"hover":{
"enabled":false
}
},
"enableMouseTracking":false,
"zIndex":5,
"step":true,
"data":[
[1569369600000,5],
[1569974400000,5]
]
},
{
"type":"line",
"yAxis":"y-axis-sensors",
"marker":{
"enabled":false
},
"lineWidth":1,
"animation":false,
"name":"Refill",
"seriesGroup":"levelSeries",
"id":"series-level-range-refill",
"color":"#D23333",
"showInLegend":false,
"states":{
"hover":{
"enabled":false
}
},
"enableMouseTracking":false,
"zIndex":5,
"step":true,
"data":[
[1569369600000,17],
[1569974400000,17]
]
},
{
"type":"column",
"yAxis":"y-axis-moisture",
"marker":{
"enabled":false
},
"name":"Rainfall",
"seriesGroup":"rainfallSeries",
"states":{
"hover":{
"enabled":false
}
},
"id":"series-rainfall",
"pointWidth":6,
"borderWidth":0,
"color":"rgba(41, 182, 246, 0.3)",
"data":[
[1569488400000,5]
],
"zIndex":10,
"stacking":"normal",
"stack":"moisture"
},
{
"type":"column",
"yAxis":"y-axis-moisture",
"marker":{
"enabled":false
},
"states":{
"hover":{
"enabled":false
}
},
"name":"Irrigation",
"seriesGroup":"irrigationSeries",
"id":"series-irrigation",
"pointWidth":6,
"borderWidth":0,
"color":"rgba(205,220,57, 0.3)",
"data":[[1569574800000,3]],
"zIndex":10,
"stacking":"normal",
"stack":"moisture"
}
]
}
Я немного растерялся из-за того, почему это происходит,Кто-нибудь может пролить свет на это?