Highcharts柱形图直方图在工具提示中显示x范围

Posted 2021-05-05

我正在使用highcharts柱形图来创建直方图。 （我不能使用直方图图表类型，因为我使用的是预聚合数据）。如何配置列的工具提示以显示列的日期范围而不是开始日期？

http://jsfiddle.net/3q6gxjph/8/

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  xAxis: {
    type: 'datetime'
  },
  yAxis: {
    title: {
      text: 'Count'
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y}</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    usehtml: true
  },
  plotOptions: {
    series: {
      pointInterval: 24 * 3600000, // one day
      pointStart: 0,
      pointPlacement: 'between'
    },
    column: {
      groupPadding: 0,
      pointPadding: 0
    }
  },
  series: [{
    data: [49, 71, 106, 129, 144, 176, 135, 148, 216, 194, 95, 54]

  }]
});

答案

您可以使用tooltip.formatter来计算工具提示中可见点的范围。

tooltip: {
  formatter () {
    const x1 = Highcharts.dateFormat('%Y-%m-%d', this.x)
    const x2 = Highcharts.dateFormat('%Y-%m-%d', this.x + 24 * 3600 * 1000)
    const header = `<span style="font-size:10px">${x1} - ${x2}</span><table>`

    const body = `<tr>
      <td style="color:${this.series.color};padding:0">${this.series.name}: </td>
      <td style="padding:0"><b>${this.y}</b></td>
    </tr>`

    const footer = '</table>'

    return header + body + footer
  },

实例：http://jsfiddle.net/3a6m49aj/