如何在Highchart中自定义工具提示? [英] How to customize tooltip in Highchart?

问题描述

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

I want my tooltip to show the range of time according to the x-axis.
The image below shows what I want. So if anyone knows how can I do that, please let me know or suggest me. Thank you :)

这是我的代码

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>

推荐答案

您可以使用 tooltip.formatter . 根据您的情况，您需要编辑工具提示的标题.

You can build your own tooltip with the use of tooltip.formatter. In your case, you need to edit header of the tooltip.

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/

这篇关于如何在Highchart中自定义工具提示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！