Добавление пользовательской всплывающей подсказки к пузырьковой диаграмме / highchart

Я пытаюсь настроить всплывающую подсказку в пузырьковой диаграмме highcharts. Вместо того, чтобы во всплывающей подсказке отображались только цифры, я хотел бы добавить контекст на основе заголовков x, y и z (например, «50 погибших, 100 раненых, 150 всего жертв» вместо текущего «(50 150) Размер : дисплей 150 дюймов). Я могу сделать это в диаграммах разброса, используя следующее, но не кубики в пузырьках. Есть идеи? Спасибо. :)

tooltip: {
                    headerFormat: '<b>{series.name}</b><br>',
                    pointFormat: '{point.x} fatalities, {point.y} injured, {point.z}  total'
                }

person elizabeth_shell    schedule 16.04.2013    source источник


Ответы (2)


Надеюсь, я правильно понял ваш вопрос, это то, что вы ищете.

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

        chart: {
            type: 'bubble',
            zoomType: 'xy'
        },
        plotOptions: {
            bubble: {
                tooltip: {
                    headerFormat: '<b>{series.name}</b><br>',
                    pointFormat: '{point.x} fatalities, {point.y} injured, {point.z}  total'

                }
            }
        },
        title: {
            text: 'Highcharts Bubbles'
        },

        series: [{
            data: [
                [97, 36, 79],
                [94, 74, 60],
                [68, 76, 58],
                [64, 87, 56],
                [68, 27, 73],
                [74, 99, 42],
                [7, 93, 87],
                [51, 69, 40],
                [38, 23, 33],
                [57, 86, 31]
            ]
        }, {
            data: [
                [25, 10, 87],
                [2, 75, 59],
                [11, 54, 8],
                [86, 55, 93],
                [5, 3, 58],
                [90, 63, 44],
                [91, 33, 17],
                [97, 3, 56],
                [15, 67, 48],
                [54, 25, 81]
            ]
        }, {
            data: [
                [47, 47, 21],
                [20, 12, 4],
                [6, 76, 91],
                [38, 30, 60],
                [57, 98, 64],
                [61, 17, 80],
                [83, 60, 13],
                [67, 78, 75],
                [64, 12, 10],
                [30, 77, 82]
            ]
        }]

    });

});

ДЕМО

person Mahesh Sapkal    schedule 17.04.2013
comment
Да! Спасибо, Махеш Сапкал! - person elizabeth_shell; 18.04.2013
comment
jsfiddle.net/Kondaldurgam/7kLkh7ya/24 Пожалуйста, проверьте, когда у меня будет ось X 0 -50%, но показывает 1%, когда меня зависло - person Kondal; 04.04.2017

Вы должны использовать всплывающую подсказку formatter http://api.highcharts.com/highstock#tooltip.formatter

РЕДАКТИРОВАТЬ: http://jsfiddle.net/7nqB5/

person Sebastian Bochan    schedule 17.04.2013
comment
Да, размещение в корне работает, но оно также меняет всплывающую подсказку для всех других типов линий на диаграмме. - person Alex; 12.06.2013
comment
Вы можете распознать его по параметру series.index или series.id. - person Sebastian Bochan; 12.06.2013
comment
this.series.userOptions будет там, где находится идентификатор. Но как тогда сделать так, чтобы он вернулся к значениям по умолчанию для других серий (/seriestypes)? См. мой эксперимент @ jsfiddle.net/alexman/7nqB5/1 - person Alex; 14.06.2013
comment
Я вижу, похоже, что серия проверок работает, так что не могли бы вы объяснить, что нужно? - person Sebastian Bochan; 14.06.2013
comment
Этот «пользовательский» получает пользовательскую всплывающую подсказку, а другие серии получают всплывающую подсказку диаграммы по умолчанию (последняя не работает) - person Alex; 18.07.2013
comment
Вы можете определить, добавлен ли параметр z (требуется пузырьковая диаграмма), а затем настроить всплывающую подсказку в условии jsfiddle. net/sbochan/7nqB5/2 Подсказка по умолчанию должна быть определена в ДРУГОМ условии. - person Sebastian Bochan; 18.07.2013
comment
Это не всплывающая подсказка по умолчанию, это пользовательская всплывающая подсказка, которая говорит, что она используется по умолчанию :D Хотя может сработать для некоторых людей. +1 - person Alex; 19.07.2013
comment
Я знаю, но я описываю вам, что вам нужно поместить текст в ElSE, это только вариант. - person Sebastian Bochan; 19.07.2013