Highcharts Heatmap xAxis выравнивание тиков

Question

Проблема заключается в том, что отметки оси X отображаются не по центру для каждой другой ячейки.Я хочу, чтобы они были в центре.

Вот мой пример скрипки:

https://jsfiddle.net/udeleng/ry10Lc6q/6/

Highcharts.chart('container', {
  "chart": {
    "type": "heatmap",
    "zoomType": "x",
    "panning": true,
    "panKey": "shift"
  },
  "title": {
    "text": null
  },
  "colorAxis": {
    "stops": [
      [0, "#3060cf"],
      [0.5,"#fffbbc"],
      [0.9,"#c4463a"]
    ]
  },
  "xAxis": {
    "lineColor": "#ffffff",
    "labelsx": {
      "useHTML": true,
      "style": {
        "color": "#6e6e70"
      }
    },
    "type": "datetime"
  },
  "legend": {
    "enabled": false
  },
  "yAxis": {
    "title": {
      "text": null
    }
  },
  "plotOptions": {
    "series": {
      "cropThreshold": 100000,
      "turboThreshold": 0
    }
  },
  "series": [
    {
      "borderWidth": 0,
      "tooltip": {
        "headerFormat": "",
        "pointFormat": "{point.value}"
      },
      "data": [
        {
          "x": 1493622000000,
          "y": 0,
          "value": 1.4
        },
        {
          "x": 1493622000000,
          "y": 1,
          "value": 0.9
        },
        ...
      ],
      "colsize": 86400000
    }
  ]
});

Если вместо этого использовать свойство массива series.data, я использую опцию CSV (с модулем данных)Чтобы добавить эти данные, тики должны быть центрированы:

https://jsfiddle.net/udeleng/xetj9Lds/4/

Highcharts.chart('container', {
  "chart": {
    "type": "heatmap",
    "zoomType": "x",
    "panning": true,
    "panKey": "shift"
  },
  data: {
    firstRowAsNames: false,
    csv: document.getElementById('csv').innerHTML
  },
  "title": {
    "text": null
  },
  "colorAxis": {
    "stops": [
      [0, "#3060cf"],
      [0.5,"#fffbbc"],
      [0.9,"#c4463a"]
    ]
  },
  "xAxis": {
    "lineColor": "#ffffff",
    "labelsx": {
      "useHTML": true,
      "style": {
        "color": "#6e6e70"
      }
    },
    "type": "datetime"
  },
  "legend": {
    "enabled": false
  },
  "yAxis": {
    "title": {
      "text": null
    }
  },
  "plotOptions": {
    "series": {
      "cropThreshold": 100000,
      "turboThreshold": 0
    }
  },
  "series": [
    {
      "borderWidth": 0,
      "tooltip": {
        "headerFormat": "",
        "pointFormat": "{point.value}"
      },
      "colsize": 86400000
    }
  ]
});

Я бы предпочел, чтобы не приходилось каждый раз вычислять расположение тиков, интервал или что-либо из этого,как кажется, работает правильно при использовании CSV.

Я не могу использовать CSV, потому что мне нужно связать дополнительные метаданные для каждой точки данных, которую допускает массив объектов series.data.

Answer 1

У вас есть разные значения x.Пожалуйста, сравните:

console.log(new Date(1493622000000));
console.log(new Date('2017-05-01'));

Результаты:

Mon May 01 2017 09:00:00 GMT+0200
Mon May 01 2017 02:00:00 GMT+0200

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