Показать настроенную мышь над пузырьковой диаграммой в Highchart JS

Question

Показать настроенную мышь над пузырьковой диаграммой в Highchart JS

0

У меня есть диаграмма Bubble, созданная через модуль HighChart JS. Пузырьковая диаграмма в норме и делает то, что она должна делать, единственная проблема, с которой я сталкиваюсь, что я хочу, чтобы пользовательский вывод зависал от пузыря данных.

Взгляните на JSFiddle, который я создал здесь: - http://jsfiddle.net/DUvQW/8/

Если вы наведите курсор на любой пузырь на графике, он показывает плавающий бар с выходом чего-то вроде: -

Mexico
(1354, 1352), Size: 1928)

Я надеюсь, что это даст мне результат: -

 Mexico
 (1354, 1352) 
 Year: 2000,
 Size: 1928)

PS Как вы видите в значениях, я добавил четвертый параметр уже как год.

Есть идеи?

Благодарю.

Steve 20 фев. 2014, в 23:03

Источник

Теги:

javascript

jquery

highcharts

2 ответа

0

Вам нужно настроить настраиваемую tooltip с помощью formatter.

wergeld 20 фев. 2014, в 19:07

Ещё вопросы

Mark · Accepted Answer · 2014-02-20T19-58-00.000Z

Рефакторинг данных вашей серии в массив объектов:

    {
        name: 'South Korea',
        id: 6,
        argumentField: 'total6',
        valueField: 'perc6',
        sizeField: 'older6',
        tagField: 'tag6',
        visible: false,
        data: [
            {x:160, y:801, z:1955, year:2000},
            {x:433, y:1653, z:1910, year:2005},
            {x:614, y:1432, z:1918, year:2014},
            {x:724, y:372, z:1950, year:2004},
            {x:434, y:936, z:1920, year:2003}
        ]
    }

сделает жизнь намного проще...

Затем используйте пользовательскую подсказку:

   tooltip: {
        formatter: function() {
            var t = this.series.name;
            t += '<br/> (' + this.x + ',' + this.y + ')';
            t += '<br/> Year: ' + this.point.year + ',';
            t += '<br/> Size: ' + this.point.z;
            return t;
        }
    },

Обновленная скрипка здесь (примечание, я только изменил данные для Южной Кореи).