Question

在this fiddle中，使用了共享工具提示。像魅力一样。

tooltip: {
        formatter: function () {
            console.log(this);
            var s = '<b>' + this.x + '</b>';

            $.each(this.points, function () {
                s += '<br/>' + this.series.name + ': ' +
                    this.y + 'm';
            });

            return s;
        },
        shared: true
    }

现在我正在寻找一种方法来显示气泡图的共享工具提示，就像这样： http://jsfiddle.net/gn6dtx6x/1/

不幸的是，this选项属性中的formatter对象与第一个示例不同。

那么，泡泡图中是否存在共享工具提示的方法，还是我必须创建自己的自定义工具提示功能？

感谢您的回答。

Answer 1

你需要迭代每个系列并指向，比较x值。

tooltip: {
        formatter: function () {
            var s = '<b>' + this.x + '</b>',
                x = this.point.x;
            $.each(this.series.chart.series, function (i, serie) {
                $.each(serie.data, function (j, p) {
                    if (p.x === x) {
                        s += '<br/>' + this.series.name + ': ' + p.y;
                    }
                });
            });

            return s;
        },
        shared: true
    },

示例：http://jsfiddle.net/gn6dtx6x/5/

Answer 2

使用变通方法执行此操作的一种方法是：http://jsfiddle.net/gn6dtx6x/4/

tooltip: {
formatter: function () {
            return shared_tooltip (this.point.x,this.point.y);
        },
        shared: true // true|false does not matter here
    },

回调看起来像这样：

var shared_tooltip = function(x,y){

        var series = $('#container').highcharts().series;
        var s = x + '|'+y;

        $.each( series, function (key1, value1){
            var data_el_x = value1.data.filter(function(el){
                return (el.x === x);
            });
            if(data_el_x.length === 0){
                return false;
            }
            var data_el_xy = data_el_x.filter(function(el){
                return (el.y === y);
            });
            var valfreq = (data_el_xy.length === 0) ? 0 : data_el_xy[0].z;
            var allfreq = 0;
            $.each( data_el_x, function (key2, value2){
                allfreq += value2.z;
            });

            s+='<br/>'+value1.name+': '+valfreq+'/'+allfreq;

        });

        return s;

    };

Highcharts - 分类气泡图的共享工具提示

2 个答案: