Как использовать форматирование всплывающей подсказки и по-прежнему отображать цвет диаграммы (как это делает по умолчанию)?

Если я использую всплывающую подсказку по умолчанию 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
},

Ответы

Ответ 1

Я нашел документацию для этого (http://api.highcharts.com/highcharts#tooltip.pointFormat). HTML-код, который они используют, находится в pointFormat, а не в formatter:

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

Ответ 2

Улучшение на WOUNDEDStevenJones ответа, но с конкретным решением, отличным от jQuery:

Чтобы подражать следующему HTML в pointFormat (http://api.highcharts.com/highcharts#tooltip.pointFormat):

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

Я создал этот не зависящий от 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

Ответ 3

Если вы хотите, чтобы основная часть всплывающей подсказки выглядела одинаково, и только значение x, которое должно быть отформатировано по-другому, вы можете использовать свойство headerFormat вместо этого и использовать point.key, а не this.x. Это выполнит то же самое без необходимости воспроизводить тело серии.

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

Ответ 4

Вы можете использовать:

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