Highcharts工具提示箭頭位置

Question

我正在嘗試修改堆疊柱形圖的Highcharts工具提示，以便工具提示上的小箭頭指向條形圖的中間。 我知道我可以使用positioner回調來改變工具提示的位置，但似乎箭頭始終指向條形的頂部，無論它的位置如何。 請看我的小提琴我的意思： http ： //jsfiddle.net/4dy46vfx/1/ 。

下面是我所追求的粗略截圖：

有沒有辦法改變工具提示箭頭的位置？

Answer 1

使用禁用的tooltip.animation屬性，您可以在updatePosition方法的包裝中計算anchorY ：

(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