highcharts：气泡图：我可以将气泡渲染得更高，而不是居中吗？答案

【问题标题】：highcharts: bubble charts: can I render the bubbles higher, not centered?highcharts：气泡图：我可以将气泡渲染得更高，而不是居中吗？
【发布时间】：2015-03-02 14:36:12
【问题描述】：

我大致熟悉 highcharts 中的气泡图。气泡始终根据其 X 和 Y 坐标居中渲染。

假设 Y 轴是货币（美元）。泡沫成本例如100 美元。然后，气泡精确地呈现在这 100 美元（和 X 轴）的中间，并且范围例如，其边距在顶部为 110 美元，在底部为 90 美元，这取决于它的半径。

现在，有没有办法人为地将这个气泡设置得更高，以至于边缘的底部正好划出 100 美元大关？

当然，我可以通过添加 10 美元的偏移量来操作所有数据系列。但是，如果我使用“缩放功能”，那将不起作用，因为比例不同！

如果有人想知道我为什么需要这些奇怪的东西：如果商品“xyz”的价格为 100 美元且气泡范围低至 90，则不应该有谈判的空间。买家不应该想到他可以谈判奖品，因为它的半径有 90 美元的空间！

嘿，谢谢大家！

【问题讨论】：

标签： javascript highcharts

【解决方案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);

【讨论】：

【解决方案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%'
        }
    },

最后一个问题是工具提示。工具提示仍然是指原始中心。如果您将鼠标悬停在现在移动的气泡上，您可以看到这一点。你会看到“旧原版”的影子。

我们可以添加/修改您的函数以使其也适合 Tooltip 吗？

问候！

【讨论】：