具有日期时间xAxis的Highcharts Heatmap中的pointPlacement

Question

如何在时间戳之后的一小时内显示我的每小时采样数据（而不是以它为中心）。我不想操纵数据。

00:00的时间戳应显示00:00和01:00之间的数据

阅读完文档后，我尝试将pointPlacement与pointRange结合使用。

在以下示例中，我希望在1,2和3小时内看到之间的数据。 pointPlacement的选项不会按预期更改可视化，如下面的小提琴所示。

我是否误解了pointPlacement或者我是否错过了任何先决条件？

如何在这里修复数据空间的任何其他想法？

JsFiddle

HTML 和 JS ：

＆＃13;

＆＃13;

var hour = 60 * 60 * 1000;

var chart = Highcharts.chart('container', {

  chart: {
    type: 'heatmap',
    marginTop: 40,
    marginBottom: 80,
    plotBorderWidth: 1
  },


  title: {
    text: 'Test pointPlacement in heatmap with datetime axis'
  },

  xAxis: {
    type: "datetime"
  },

  yAxis: {
    categories: ['Cat 0', 'Cat 1'],
    title: null
  },

  colorAxis: {
    min: 0,
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0]
  },

  legend: {
    align: 'right',
    layout: 'vertical',
    margin: 0,
    verticalAlign: 'top',
    y: 25,
    symbolHeight: 280
  },

  tooltip: {
    formatter: function() {
      return '<b>' + '</b> Color Axis: <b>' +
        this.point.value + '</b><br> y-Axis: <b>' + this.series.yAxis.categories[this.point.y] + '</b>';
    }
  },

  series: [{
    name: 'hourly values of category',
    colsize: hour,
    pointRange: hour,
    borderWidth: 1,
    data: [
      [hour, 0, 1],
      [2 * hour, 0, 2],
      [hour, 1, 3],
      [2 * hour, 1, 4]
    ],
    dataLabels: {
      enabled: true,
      color: '#000000'
    }
  }]

});

function placement(option) {
  chart.setTitle({
    text: "Placement Option: " + String(option)
  })

  chart.series[0].update({
    pointPlacement: option
  }, true);
}

＆＃13;

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

<button onclick='placement(null);'>
    null
</button>

<button onclick='placement("on");'>
    on
</button>

<button onclick='placement("between");'>
    between
</button>

<button onclick='placement(-0.5);'>
    -0.5
</button>
    
<button onclick='placement(0.5);'>
    0.5
</button>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我似乎pointPlacement的数值在热图中不起作用（我在github上报告）：https://github.com/highcharts/highcharts/issues/7860

解决方法：

您可以手动更改刻度线的位置（tickPositioner）并将原始值打印到用户（labels.formatter）。

  xAxis: {
    tickPositioner: function() {
      // manually apply offset to all ticks
      this.tickPositions = this.tickPositions.map(x => x - offset);
    },
    labels: {
      formatter: function() {
        // print the original value to the user
        return this.value + offset;
      }
    }
  },

现场演示： http://jsfiddle.net/BlackLabel/d4fuLx6y/