Как я могу расширить ось X на графике Highcharts? - PullRequest
1 голос
/ 05 июня 2019

У меня есть гистограмма Highcharts.Каждая точка имеет группу результатов, однако первый и последний элементы обрезаются.Как я могу расширить ось X, чтобы отображались все столбцы?

На изображении ниже каждая группа имеет одинаковые результаты, поэтому вы можете видеть, что N и P отброшены из первой группы, а S и Mg изпоследняя группировка.

enter image description here

Данные поступают из базы данных, поэтому я не знаю, сколько будет групп или в каком диапазоне (такпростого добавления дня к каждому концу недостаточно, перекрытие может быть больше или меньше)

  const conf = {
      chart: {
        type: "column",
        animation: false,
        marginRight: 10,
        dateFormat: "dd/mm/YYYY"
      },
      title: {
        text: "Spread Events"
      },
      xAxis: {
        type: "datetime",
        tickPixelInterval: 50
      },
      yAxis: {
        title: {
          text: "Spread"
        },
        plotLines: [
          {
            value: 0,
            width: 1,
            color: "#808080"
          }
        ]
      },
      legend: {
        enabled: true
      },
      exporting: {
        enabled: false
      },
      plotOptions: {
        column: {
          pointPadding: 0.2,
          borderWidth: 0
        }
      },
      series: this.state.graphData
    };

, и это graphData из примера

[
  {
    "name": "N",
    "data": [[1559669642443, 300], [1559343600000, 300], [1559257200000, 300]]
  },
  {
    "name": "P",
    "data": [[1559669642443, 160], [1559343600000, 160], [1559257200000, 160]]
  },
  {
    "name": "K",
    "data": [[1559669642443, 470], [1559343600000, 470], [1559257200000, 470]]
  },
  {
    "name": "S",
    "data": [[1559669642443, 120], [1559343600000, 120], [1559257200000, 120]]
  },
  {
    "name": "Mg",
    "data": [[1559669642443, 90], [1559343600000, 90], [1559257200000, 90]]
  }
]

1 Ответ

1 голос
/ 05 июня 2019

У вас Highcharts error # 15 в консоли, что означает, что ваши данные не отсортированы. Для старших графиков требуются отсортированные данные в порядке возрастания X:

series: [{
        ...,
        data: [
            [1559257200000, 300],
            [1559343600000, 300],
            [1559669642443, 300]
        ]
    }, ...
]

Демонстрационная версия: http://jsfiddle.net/BlackLabel/y2rzd65m/

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