Ответ 1

Я размещаю свой собственный ответ здесь как Kacper Madej answer здесь на самом деле не отвечает вообще, он просто помещает 5 различных символов, которые использует Highcharts в та же подсказка:

Этот ответ работает, если мы используем несколько цветов, но он полностью сработает, если все наши серии имеют один и тот же цвет - вы также можете не отображать их вообще.

Вытягивание соответствующего символа в нашу подсказку

Демо JSFiddle

Highcharts предоставляет свойство symbolName внутри своего объекта graphic, который является самим свойством самого объекта point. Используемые формы:

• "circle" ●
• "diamond" ♦
• "square" ■
• "triangle" ▲
• "triangle-down" ▼

С помощью этой информации мы можем построить оператор switch в нашей tooltip.formatter() функции, которая отображает соответствующий символ с именем символа, который предоставляет Highcharts:

var symbol;

switch ( this.point.graphic.symbolName ) {
    case 'circle':
        symbol = '●';
        break;
    case 'diamond':
        symbol = '♦';
        break;
    case 'square':
        symbol = '■';
        break;
    case 'triangle':
        symbol = '▲';
        break;
    case 'triangle-down':
        symbol = '▼';
        break;
}

Затем мы можем поместить символ в нашу подсказку, указав нашу переменную symbol:

return this.x + '<br/>' + symbol + ' ' + this.series.name + ': ' + this.y;

Добавление цвета

JSFiddle demo

Затем мы можем расширить его до цвета в нашей точке, чтобы он соответствовал цвету серии. Это просто включает в себя обертывание нашего symbol в элементе <span> и предоставление ему style для набора цветов, которые Highcharts дает нам через this.series.color:

'<span style="color:' + this.series.color + '">' + symbol + '</span>';

Обеспечение наличия символа

Чтобы предотвратить ошибки JavaScript, нам нужно обернуть наш оператор switch в следующем разделе if:

if ( this.point.graphic && this.point.graphic.symbolName )

При этом вы также должны сначала определить свою переменную symbol как пустую строку (''), чтобы она не отображалась как undefined в нашей подсказке:

var symbol = '';

Обработка пользовательских изображений маркера

Демо JSFiddle

В этом примере я использовал следующее изображение:

Стоит отметить, что, хотя это решение отлично подходит для этого вопроса, оно будет падать при работе с пользовательскими изображениями маркеров - когда они используются, нет объекта graphic или symbolName, и поскольку мы используя наш собственный образ, мы бы не захотели отображать какие-либо формы выше в любом случае.

Первое, что нужно сделать, это рассказать Highcharts, что мы хотим использовать HTML в нашей подсказке. Мы можем сделать это, указав useHTML: true на наш объект tooltip:

tooltip: {
    formatter: function() { ... },
    useHTML: true
}

К счастью, подсказки Highcharts поддерживают элемент HTML <img /> и позволяют нам вытаскивать URL-адрес настраиваемого изображения через свойство symbol в объекте marker, используя this.point.marker.symbol.

this.point.marker.symbol
-> "url(http://i.imgur.com/UZHiQFQ.png)"

Второе препятствие удаляет url( и ), окружающие фактический URL-адрес изображения. Для этого мы можем использовать регулярное выражение для соответствия битам, которые мы хотим удалить. Регулярное выражение, с которым я пошел, - /^url\(|\)$/g, которое визуализируется как:

В конце g указано, что мы хотим вытащить любые совпадения, поэтому мы можем заменить оба url( и ) одним махом:

var url = this.point.marker.symbol.replace(/^url\(|\)$/g, '');
-> "http://i.imgur.com/UZHiQFQ.png"

Затем мы можем поместить это в наш элемент <img /> и сохраним это в нашей переменной symbol:

symbol = '<img src="' + url + '" alt="Marker" />';

Наконец, мы хотим убедиться, что объект marker и symbol существуют. Я решил сделать это как else if поверх оригинального оператора if, объявленного в разделе "Обеспечение наличия символа" выше:

if ( this.point.graphic && this.point.graphic.symbolName ) { ) { ... }
else if ( this.point.marker && this.point.marker.symbol ) { ... }

Ответ 2

Вы можете сделать это следующим образом: http://jsfiddle.net/fspzj4xw/

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

                $.each(this.points, function () {
                    s += '<br/>' + '<span style="color:' + this.series.color + '"> ●♦▲▼■ </span>' + ' ' + this.series.name + ': ' + this.y + 'm';
                });

                return s;
            },
            shared: true
        },

Ответ 3

Я вижу, что это более старый поток, но поскольку API Highcharts, по-видимому, отличается в некоторых моментах с момента первоначального сообщения, я предоставляю обновление здесь с подробностями, которые только что работали для меня, если это полезно для других...

Я использую Highcharts JS v4.2.6 (2016-08-02) (наряду с highcharts-ng 0.0.12) и не смог получить доступ к свойству this.point.graphic.symbolName для реализации Решение Джеймса Доннелли, вместо этого мне пришлось изменить его, чтобы получить доступ к this.series.symbol.

Символы, отображаемые в инструкции switch, выводятся из их кодов геометрии UTF-8, поэтому необходимо структурируйте операторы switch следующим образом symbol = 'charactercodegoeshere';. (ex: symbol = '& # 9679', в случае символа круга)

Следующий код в конечном итоге отобразил правильный символ в правильном цвете в подсказке диаграммы для данной серии:

tooltip: {
    style: {
        padding: 10,
        fontWeight: 'bold'
    },
    useHTML: true,
    formatter: function () {

        var symbol;

        switch ( this.series.symbol ) {
            case 'circle':
                symbol = '&#9679';
                break;
            case 'diamond':
                symbol = '&#9670';
                break;
            case 'square':
                symbol = '&#9632';
                break;
            case 'triangle':
                symbol = '&#9650';
                break;
            case 'triangle-down':
                symbol = '&#9660';
                break;
        }

        return Highcharts.dateFormat('%B %Y', this.x) + '<br/>' + '<span style="color:' + this.series.color + '; font-size: 1.5em;">' + symbol + '</span> ' + this.series.name + ': ' + this.y;
    }
}

Метод Highcharts.dateFormat() использовался для форматирования временных меток эпохи-миллисекунды для отображения.