将自定义工具提示添加到气泡图/高图

时间:2013-04-16 23:49:29

标签: javascript charts highcharts jsfiddle bubble-chart

我正在尝试在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'
                }

2 个答案:

答案 0 :(得分:7)

希望我能正确理解你的问题,这就是你要找的。

$(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]
            ]
        }]

    });

});

<强> DEMO

答案 1 :(得分:1)