Highcharts气泡水平堆叠答案

【问题标题】：Highcharts bubble horizontal stackingHighcharts气泡水平堆叠
【发布时间】：2018-10-10 14:46:37
【问题描述】：

我需要设置水平气泡堆叠，我有四个堆叠的列，我需要在每个列上放置气泡。我做了垂直堆叠，但它们都保持在水平方向

我的代码：http://jsfiddle.net/Hideon/7bu2z0mk/1/

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },

    xAxis: {
        type: 'datetime',
    },

    plotOptions: {
        pointWidth: 1,
        column: {
            stacking: 'normal',
            pointRange: 1000 * 60 * 60 * 24
        },
        bubble: {
            stacking: 'normal',
        }
    },

    series: [

        {
            type: 'bubble',
            data: [{
                    x: Date.UTC(2010, 0, 1),
                    y: 29.9,
                    z: 5
                },

            ],
            stack: 0
        },
        {
            type: 'bubble',
            data: [{
                    x: Date.UTC(2010, 0, 1),
                    y: 29.9,
                    z: 5
                },

            ],
            stack: 0
        },
        {
            type: 'bubble',
            data: [{
                    x: Date.UTC(2010, 0, 1),
                    y: 29.9,
                    z: 5
                },

            ],
            stack: 1
        },
        {
            type: 'bubble',
            data: [{
                    x: Date.UTC(2010, 0, 1),
                    y: 29.9,
                    z: 5
                },

            ],
            stack: 1
        },

        {
            type: 'column',
            data: [{
                    x: Date.UTC(2010, 0, 1),
                    y: 29.9
                },

            ],
            stack: 0
        }, {
            type: 'column',
            data: [{
                    x: Date.UTC(2010, 0, 1),
                    y: 29.9
                },

            ],
            stack: 0

        }, {
            type: 'column',
            data: [{
                    x: Date.UTC(2010, 0, 1),
                    y: 29.9
                },

            ],
            stack: 1
        }, {
            type: 'column',
            data: [{
                    x: Date.UTC(2010, 0, 1),
                    y: 29.9
                },

            ],
            stack: 1
        }
    ]
});

【问题讨论】：

标签： highcharts

【解决方案1】：

不支持bubble 系列类型的堆叠，但您可以实现它。请看下面的例子，您可以使用toValue方法计算所有气泡点的y值：

Highcharts.chart('container', {
    chart: {
        events: {
            load: function() {
                var bubble = this.series[0],
                    yAxis = this.yAxis[0],
                    base = yAxis.toPixels(0),
                    xVal = 0,
                    radius,
                    newY = 0;

                Highcharts.each(bubble.points, function(p, i) {
                    if (p.x !== xVal) {
                        xVal = p.x;
                        newY = 0;
                    }

                    radius = p.marker.radius;
                    newY += yAxis.toValue(base - radius)

                    p.update({
                        y: newY
                    });

                    newY += yAxis.toValue(base - radius);
                });
            }
        }
    },
    yAxis: {
        min: 0,
        max: 5
    },
    series: [{
        type: 'bubble',
        data: [
            [0, 0, 10],
            [0, 0, 20],
            [0, 0, 15],
            [0, 0, 12],
            [0, 0, 20],
            [0, 0, 15],
            [1, 0, 11],
            [1, 0, 12],
            [1, 0, 13],
            [1, 0, 14],
            [1, 0, 16],
            [1, 0, 15]
        ]
    }]
});

现场演示：http://jsfiddle.net/BlackLabel/dmn63hce/

API：https://api.highcharts.com/class-reference/Highcharts.Axis#toValue

【讨论】：