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

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;

    };