首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >高图表工具提示箭头位置

高图表工具提示箭头位置
EN

Stack Overflow用户
提问于 2016-01-19 01:54:06
回答 1查看 2K关注 0票数 4

我试图修改一个堆叠的列图的高级图表工具提示,以便工具提示上的小箭头指向条形图的中间。我知道我可以使用positioner回调来更改工具提示的位置,但是看起来箭头总是指向酒吧的顶部,不管它的位置是什么。看看我的小提琴是什么意思:http://jsfiddle.net/4dy46vfx/1/

下面是我所追求的一个粗略的截图:

有任何方法可以改变工具提示箭头的位置吗?

EN

回答 1

Stack Overflow用户

发布于 2019-06-13 13:44:43

使用禁用的tooltip.animation属性,您可以在updatePosition方法的包装中计算anchorY

代码语言:javascript
运行
复制
(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/

启用动画后,有必要重写该方法:

代码语言:javascript
运行
复制
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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34867275

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档