如何使用工具提示格式化程序并仍然显示图表颜色(默认情况下)？

Question

如果我使用默认的Highcharts工具提示,它会显示一个圆圈图表数据的颜色(http://jsfiddle.net/WOUNDEDStevenJones/mpMvk/1/上的浅蓝/黑色圆圈):

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

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

这默认显示工具提示中的数据颜色:

tooltip: {
    shared: true
}

但这不是:

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
},

Answer 1

我找到了这个文档(http://api.highcharts.com/highcharts#tooltip.pointFormat).他们使用的HTML位于pointFormat下,而不是格式化程序:

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

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

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
},

Answer 2

改进WOUNDEDStevenJones的答案,但使用非jQuery特定的解决方案:

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

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

我为工具提示格式化函数创建了这个非jQuery reliant代码:

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