Question

我大致熟悉高级图表中的气泡图。气泡始终根据其X和Y坐标呈现居中。

想象一下，Y轴是货币（美元）。泡沫成本例如100美元。然后气泡正好在这100美元（和X轴）的中间进行渲染，例如，其顶部边缘为110美元，底部为90美元，具体取决于其半径。

现在，有没有办法人为地设置这个气泡，正好是边缘的底部有100美元大关？

当然，我可以通过添加10美元的偏移量来操纵所有数据系列。但是，如果我使用＆＃34; zoom-function＆＃34;因为比例不同了！

如果有人想知道为什么我需要这些奇怪的东西：如果文章＆＃34; xyz＆＃34;不应该有谈判的余地。花费100美元，泡沫范围降至90.买家不应该认为他可以协商奖品，因为它的半径可以达到90美元的空间！

嘿谢谢你们！

Answer 1

不受支持，但您可以扩展默认方法drawPoints：http://jsfiddle.net/zb443xj9/

(function (H) {
    H.wrap(H.seriesTypes.bubble.prototype, 'drawPoints', function (p) {
        var series = this;
        H.each(series.points, function (point, i) {
            point.shapeArgs.y -= point.shapeArgs.r; // move center up by radius
        });

        p.call(this);
    });
})(Highcharts);

Answer 2

您的解决方案绝对是一种方法！非常好！

在气泡中，我保存了X值和Y值等信息。

我可以简单地将 dataLabels 移回新的气泡 y：-35，//硬编码值-35适合我的情况，我可以在这里访问半径吗？

我想要像：

y: -point.shapeArgs.r //how can I access to this property?

此处 dataLabels 的代码摘录：

plotOptions: {
        bubble: {
            dataLabels: {
                enabled: true,
                y: -35,
                style: { textShadow: 'none' },
                formatter: function() {
                    return this.point.y + "<br>" + this.point.x ;
                }
            },
            minSize: '10%',
            maxSize: '30%'
        }
    },

最后一个问题是 工具提示 。工具提示仍指原始中心。你可以看到，如果你将鼠标悬停在现已转移的泡沫上。你看到了＃34;旧的原作＆＃34;阴影。

我们可以添加/修改适合Tooltip的功能吗？

问候！

highcharts：气泡图：我能否将气泡渲染得更高，而不是居中？

2 个答案: