我试图修改一个堆叠的列图的高级图表工具提示,以便工具提示上的小箭头指向条形图的中间。我知道我可以使用positioner
回调来更改工具提示的位置,但是看起来箭头总是指向酒吧的顶部,不管它的位置是什么。看看我的小提琴是什么意思:http://jsfiddle.net/4dy46vfx/1/。
下面是我所追求的一个粗略的截图:
有任何方法可以改变工具提示箭头的位置吗?
发布于 2019-06-13 05:44:43
使用禁用的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://stackoverflow.com/questions/34867275
复制相似问题