HighXart XAxis имеет дополнительный разрыв, когда несколько Yaxis - PullRequest
0 голосов
/ 24 сентября 2019

У нас есть диаграмма, которая отображает несколько рядов одновременно.

Есть основной ряд y (тип линии), который будет иметь основные показания данных.Существует также возможность установить два разных «уровня» (типы линий) на оси Y.Есть также варианты иметь несколько дополнительных стержней оси Y (типы стержней).С осью X в качестве даты и времени

Вот как выглядит типичный пример диаграммы с действительной датой для данного диапазона enter image description here

Это работаеткак и ожидалось.У нас есть основной ряд y как средняя температура воздуха (левая ось y). Затем у нас есть два столбца, один для осадков и один для орошения (правая ось y), а затем два «уровня», один красный и один синий..

Это все замечательно.Однако, когда мы перейдем к диапазону дат в будущем, когда нет данных о температуре воздуха, мы получим следующее enter image description here Обратите внимание, что дата начала - за 2 дня до диапазона дат, и конецдата выглядит равным расстоянию от конца «уровней»

Интересно, что если мы уберем бары, мы получим следующее enter image description here Теперь это показывает, что «уровни» охватывают всю ширинуграфик

Если мы удалим линии и будем иметь только столбцы, то получим следующее (как оно должно выглядеть, но с «уровнями») enter image description here

Кажется, что здесь есть что-то, что вызывает конфликт, когда есть несколько 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"
        }
    ]
}

Я немного растерялся из-за того, почему это происходит,Кто-нибудь может пролить свет на это?

1 Ответ

0 голосов
/ 24 сентября 2019

Одним из решений может быть добавление к нему дополнительной оси x и связывание ряда линий.Тогда это выглядит как ожидаемый результат.Проверьте демо и код, указанный ниже.

Код:

Highcharts.chart('container', {
  "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-axis1",
    "type": "datetime",
    "crosshair": {
      "snap": false
    },
    "title": {
      "text": "25th Sep 2019 - 1st Oct 2019",
      "margin": 15
    }
  }, {
  	"id": "x-axis2",
    visible: false,
    "type": "datetime"
  }],
  "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",
      xAxis: 'x-axis2',
      "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",
      xAxis: 'x-axis2',
      "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",
      xAxis: 'x-axis1',
      "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",
      xAxis: 'x-axis1',
      "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"
    }
  ]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

Демонстрация:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...