javascript - 具有日期时间xAxis的Highcharts热图中的pointPlacement

如何获得在其时间戳记后的一小时内显示每小时采样的数据（而不是居中显示）的信息。我不想操纵数据。

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

阅读文档后，我尝试通过将pointPlacement与pointRange结合使用来实现此目的。

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

我会误解pointPlacement还是错过任何先决条件？

还有其他想法如何在这里修复数据位置吗？

JsFiddle

HTML和JS：

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);
}

<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>

最佳答案

我似乎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/