jQuery 如何使用工具提示格式化程序并仍然显示图表颜色（就像默认情况下一样）？

How to use the tooltip formatter and still display chart color (like it does by default)?

提问by WOUNDEDStevenJones

If I'm using the default Highcharts tooltip, it displays a circle the color of the chart data (the light/dark blue circles at http://jsfiddle.net/WOUNDEDStevenJones/mpMvk/1/):

如果我使用默认的 Highcharts 工具提示，它会显示图表数据颜色的圆圈（http://jsfiddle.net/WOUNDEDStevenJones/mpMvk/1/ 上的浅蓝色/深蓝色圆圈）：

But if you use custom formatting on the tooltip (http://jsfiddle.net/WOUNDEDStevenJones/4vd7J/), the colors don't appear:

但是，如果您在工具提示 ( http://jsfiddle.net/WOUNDEDStevenJones/4vd7J/)上使用自定义格式，则不会出现颜色：

How do you get/use that color in a custom formatted tooltip? From what I can tell, there's nothing in their documentation (http://api.highcharts.com/highcharts#tooltip.formatter) explaining how to use this in a custom formatted tooltip.

您如何在自定义格式的工具提示中获取/使用该颜色？据我所知，他们的文档（http://api.highcharts.com/highcharts#tooltip.formatter）中没有任何内容解释如何在自定义格式的工具提示中使用它。

This displays the data colors in the tooltip by default:

默认情况下，这会在工具提示中显示数据颜色：

tooltip: {
    shared: true
}

But this does not:

但这不会：

tooltip: {
    formatter: function() {
        var s = '<b>'+ this.x +'</b>';

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

        return s;
    },
    shared: true
},

回答by WOUNDEDStevenJones

I found the documentation for this (http://api.highcharts.com/highcharts#tooltip.pointFormat). The HTML they're using is located under pointFormat, not formatter:

我找到了这方面的文档（http://api.highcharts.com/highcharts#tooltip.pointFormat）。他们使用的 HTML 位于 pointFormat 下，而不是格式化程序下：

<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>

Here's the updated code to use to get the colored circles in the tooltip:

这是用于在工具提示中获取彩色圆圈的更新代码：

tooltip: {
    formatter: function() {
        var s = '<b>'+ this.x +'</b>';

        $.each(this.points, function(i, point) {
            s += '<br/><span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': ' + point.y;
        });

        return s;
    },
    shared: true
},

回答by Mik Cox

Improving upon WOUNDEDStevenJonesanswer, but with a non-jQuery specific solution:

改进WOUNDEDStevenJones答案，但使用非 jQuery 特定解决方案：

To imitate the following HTML in pointFormat (http://api.highcharts.com/highcharts#tooltip.pointFormat):

在 pointFormat ( http://api.highcharts.com/highcharts#tooltip.pointFormat) 中模仿以下 HTML ：

<span style="color:{series.color}">\u25CF</span>

I created this non-jQuery reliant code for a tooltip formatter function:

我为工具提示格式化程序函数创建了这个非 jQuery 依赖代码：

formatter: function() {
    /* Build the 'header'.  Note that you can wrap this.x in something
     * like Highcharts.dateFormat('%A, %b %e, %H:%M:%S', this.x)
     * if you are dealing with a time series to display a more 
     * prettily-formatted date value.
     */
    var s = '<span style="font-size: 10px">' + this.x + '</span><br/>';

    for ( var i = 0; i < this.points.length; i++ ) {

        var myPoint = this.points[i];
        s += '<br/><span style="color:' 
             + myPoint.series.color
             + '">\u25CF</span>'
             + myPoint.series.name + ': ';

        /* Need to check whether or not we are dealing with an 
         * area range plot and display a range if we are
         */
        if ( myPoint.point.low && myPoint.point.high ) {

            s += myPoint.point.low + ' - ' + myPoint.point.high;

        } else {

            s += myPoint.y;

        }
    }

    return s;
},
shared: true

回答by VG1

If you want the main part of the tooltip look the same, and just the x-value to be formatted differently, you can use the headerFormat property instead and use point.key rather than this.x. This will accomplish the same thing without having to reproduce the series body.

如果您希望工具提示的主要部分看起来相同，而只是 x 值的格式不同，您可以改用 headerFormat 属性并使用 point.key 而不是 this.x。这将完成同样的事情，而无需重现系列主体。

tooltip: {
    headerFormat: '<b>{point.key}</b><br/>'
}

回答by Renan Rocha

You may use:

您可以使用：

> $.each(this.points, function () {
>   s += '<br/><span style="color:' + this.series.color + '">\u25CF</span>' + this.series.name + ': ' + '<b>' + this.y + '</b>';
> });