javascript - 如何在 Highchart 中自定义工具提示？

Question

我希望我的工具提示根据 x 轴显示时间范围。
下图显示了我想要的。因此，如果有人知道我该怎么做，请告诉我或建议我。谢谢:)

这是我的代码

Highcharts.chart('container', {
    chart: {
        type: 'areaspline'
    },
    title: {
        text: '<b>Power consumption</b>'
    },
    xAxis: {
      categories: [
                    '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00',
                    '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00',
                    '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00',
                    '21:00', '22:00', '23:00'
                  ]
      },
    yAxis: {
        title: {
            text: 'Power (watt)'
        }
    },
    tooltip: {
      borderColor: '#2c3e50',
      shared: true
    },
    plotOptions: {
        areaspline: {
            marker: {
                enabled: true,
                symbol: 'circle',
                radius: 3,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            }
        },
        series: {
          fillOpacity: 0.5
        }
    },
    series: [{
        name: 'Today ',
        data: [3, 4, 3, 5, 4, 10, 12, 3, 4, 3, 5, 4, 10, 12, 3, 4, 3, 5, 4, 10, 12, 3, 4, 3],
        color: '#2ecc71',
        zIndex: 1
    }, {
        name: 'Yesterday ',
        data: [1, 3, 4, 3, 3, 5, 4, 1, 3, 4, 3, 3, 5, 4, 1, 3, 4, 3, 3, 5, 4, 1, 3, 4],
        color: '#bdc3c7',
        zIndex: 0
    }],
    
    exporting: {
      buttons: {
        contextButtons: {
          enabled: false,
          menuItems: null
         }
      },
      
    enabled: false
    },

    credits: {
      enabled: false
    }
});

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

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

Answer 1

您可以使用 tooltip.formatter 构建自己的工具提示. 在您的情况下，您需要编辑工具提示的标题。

formatter: function (tooltip) {     
  const header = `<span style="color: blue;">${this.x} - ${this.x.replace(/:00/, ':59')}</span><br/>`

  return header + (tooltip.bodyFormatter(this.points).join(''))
}

示例:http://jsfiddle.net/cynysyhb/