代码之家 › 专栏 › 技术社区 › MeisenBar

具有日期时间xAxis的Highcharts热图中的点位置

heatmap highcharts javascript

MeisenBar · 技术社区 · 7 年前

如何实现在时间戳后的一小时内显示每小时采样的数据(而不是以其为中心)。我不想操纵数据。

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>

1 回复 | 直到 7 年前

Kamil Kulig 7 年前

我觉得 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/