如何修改 Highcharts x 轴工具提示文本

Question

如何修改 x 轴工具提示值？我想添加一个前缀并将值除以 1000。在此示例中，x 轴数据以毫秒为单位，但我想以秒为单位显示它，并保留 2 个小数位。我可以使用格式化程序功能来更改 x 轴标签，但看不到如何更改工具提示。

Answer 1

要添加后缀，您可以使用headerFormat ，例如：

headerFormat: '<span style="font-size: 10px"> {point.key}s </span><br/>'

但是由于您想在那里进行除法，您需要使用格式化程序功能进行完全控制：

    tooltip: {
        formatter: function(d){
            var rV = (this.x / 1000).toFixed(2)  + "s <br/>";
            rV += '<span style="color:' + this.point.color + '">\u25CF</span> ' + this.series.name + ': <b> ' + this.y + '</b><br/>';
            return rV;
        }
    },

这是一个工作示例：

headerFormat: '<span style="font-size: 10px"> {point.key}s </span><br/>'

    tooltip: {
        formatter: function(d){
            var rV = (this.x / 1000).toFixed(2)  + "s <br/>";
            rV += '<span style="color:' + this.point.color + '">\u25CF</span> ' + this.series.name + ': <b> ' + this.y + '</b><br/>';
            return rV;
        }
    },

编辑

这是您的fiddle的更新版本。

对于多个系列，您需要一个共享的工具提示并循环点对象：

   tooltip: {
        formatter: function(d){
            var rV = (this.x / 1000).toFixed(2)  + "s <br/>";
            this.points.forEach(function(d){
              rV += '<span style="color:' + d.color + '">\u25CF</span> ' + d.series.name + ': <b> ' + d.y + '</b><br/>';
            });                
            return rV;
        },
        shared: true
    },

完整的工作代码：

$(function () {
    $('#container').highcharts({

        tooltip: {
            formatter: function(d){
                var rV = (this.x / 1000).toFixed(2)  + "s <br/>";
                rV += '<span style="color:' + this.point.color + '">\u25CF</span> ' + this.series.name + ': <b> ' + this.y + '</b><br/>';
                return rV;
			}
        },

        series: [{
            name: 'Short',
            data: [[1.23 * 1000, Math.random() * 10], [2.343 * 1000, Math.random() * 10],[3.343 * 1000, Math.random() * 10],[4.343 * 1000, Math.random() * 10],[5.343 * 1000, Math.random() * 10]]
        }]
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>