如何在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/

Answer 2

使用tooltip.formatter，您可以访问有关当前点的大量信息，例如数据系列及其x轴。

构建于Highchart自己的example：

...
tooltip: {
    formatter: function () {
        var point = this.points[0].point,
            cats = point.series.xAxis.categories;

        var catIndex = point.index,
            currCat = cats[catIndex],  //..or simply "this.x"
            nextCat = cats[catIndex+1] || '';

        var s = '<b>' + currCat + ' - ' + nextCat + '</b>';

        $.each(this.points, function () {
            s += '<br/>' + this.series.name + ': ' +
                this.y + 'm';
        });

        return s;
    },
    shared: true
},
...

http://jsfiddle.net/dygcze6s/

Answer 3

Highcharts允许您传递tooltipFormatter calback，它允许以任何方式定义您的工具提示。

http://api.highcharts.com/highcharts/tooltip

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/tooltip/formatter-simple/

 tooltip: {
        useHTML: true,
        formatter: function () {
            console.log(this); // just to see , what data you can access
            return 'The value for <b>' + this.x +
                '</b> is <b>' + this.y + '</b>';
        }
    }

您还需要将工具提示模式设置为html

http://api.highcharts.com/highcharts/tooltip.useHTML

您可以通过从工具提示格式化程序内部将其发送到控制台来检查回调内部有权访问哪些数据。如果您还需要其他内容，则可以在创建系列时将其与数据点一起传递。

我希望这会有所帮助。