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

Adding a custom tooltip to a bubble chart / highchart

本文关键字：添加 自定义 工具提示 高图 气泡      更新时间：2023-09-26

我正在尝试自定义highcharts气泡图中的工具提示。而不是仅仅在工具提示中显示数字，我想添加基于x,y和z标题的上下文(例如，"50人死亡，100人受伤，总共150名受害者"而不是当前的"(50,150)Size: 150"显示)。我可以使用下面的方法在散点图中实现这一点，但在气泡中没有骰子。什么好主意吗?谢谢。:) 

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

希望我正确理解了你的问题，这是你正在寻找的吗? 

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

您应该使用工具提示formatter http://api.highcharts.com/hilitock#tooltip.formatter

编辑:http://jsfiddle.net/7nqB5/

相关文章：