Question

我有一个通过HighChart JS模块制作的气泡图。气泡图是正常的，正在做它想做的事情，我唯一的问题就是我希望在数据气泡上悬停时自定义输出。

看看我在这里创建的JSFiddle： - http://jsfiddle.net/DUvQW/8/

如果将鼠标悬停在图表上的任何气泡上，它会显示一个浮动条，其输出类似于： -

Mexico
(1354, 1352), Size: 1928)

我希望它能给我一个输出： -

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

P.S。正如您在值中看到的那样，我已将第四个参数添加为一年。

有什么想法吗？

感谢。

Answer 1

将系列数据重构为对象数组：

    {
        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：

   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;
        }
    },

更新了小提琴here（注意，我只修改了韩国的数据）。

Answer 2

您需要做的是使用tooltip设置自定义formatter。

在Highchart JS中的气泡图上显示自定义鼠标

2 个答案: