Question

我正在尝试修改堆叠柱形图的Highcharts工具提示，以便工具提示上的小箭头指向条形图的中间。我知道我可以使用positioner回调来改变工具提示的位置，但似乎箭头始终指向条形的顶部，无论它的位置如何。请看我的小提琴我的意思：http://jsfiddle.net/4dy46vfx/1/。

以下是我所追求的原始屏幕截图：

有没有办法改变工具提示箭头的位置？

Answer 1

在禁用tooltip.animation属性的情况下，您可以使用anchorY的方法来计算updatePosition：

(function(H) {
    H.wrap(H.Tooltip.prototype, 'updatePosition', function(proceed, point) {
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));

        this.label.attr({
            anchorY: point.plotY + point.h / 2 + this.chart.plotTop
        });
    });
}(Highcharts));

实时演示： http://jsfiddle.net/BlackLabel/91tfrL45/

启用动画后，有必要重写该方法：

Highcharts.Tooltip.prototype.updatePosition = function(point) {
    var chart = this.chart,
        label = this.getLabel(),
        pos = (this.options.positioner || this.getPosition).call(
            this,
            label.width,
            label.height,
            point
        ),
        anchorX = point.plotX + chart.plotLeft,
        anchorY = point.plotY + point.h / 2 + chart.plotTop,
        pad;

    // Set the renderer size dynamically to prevent document size to change
    if (this.outside) {
        pad = (this.options.borderWidth || 0) + 2 * this.distance;
        this.renderer.setSize(
            label.width + pad,
            label.height + pad,
            false
        );
        anchorX += chart.pointer.chartPosition.left - pos.x;
        anchorY += chart.pointer.chartPosition.top - pos.y;
    }

    // do the move
    this.move(
        Math.round(pos.x),
        Math.round(pos.y || 0), // can be undefined (#3977)
        anchorX,
        anchorY
    );
}

实时演示： http://jsfiddle.net/BlackLabel/w1qomy0x/

API参考： https://api.highcharts.com/highcharts/tooltip.animation

文档： https://www.highcharts.com/docs/extending-highcharts

Highcharts工具提示箭头位置

1 个答案: