当光标悬停在堆积列上时,我想避免使用工具提示出现所谓的“跳跃效果”。 这是我遇到的问题的示例: http://jsfiddle.net/ewget3wd/ -> 我有一个堆叠列,我想要一个堆叠列的唯一工具提示,但正如您在我的示例中看到的,工具提示从一个栏跳到其他栏。
我想避免这种“跳跃效应”并拥有一个共享的工具提示。我尝试了参数
共享:true
但正如您在下面的示例中看到的,工具提示的小箭头消失了:
http://jsfiddle.net/5rktjo4g/
总而言之,我希望在堆叠列的顶部有一个指向(带有箭头)的工具提示。
所以这是我的问题,这可能吗? :-)
谢谢。
最佳答案
您可以使用工具提示的共享属性并使用定位器来定位工具提示。在这里您可以找到可能对您有帮助的代码:
positioner: function(labelWidth, labelHeight, point) {
return {
x: point.plotX + labelWidth / 2,
y: point.plotY - labelHeight / 2
}
},
您可以通过包装负责绘制工具提示形状的函数来添加连接器:
(function(Highcharts) {
Highcharts.Renderer.prototype.symbols.callout = function(x, y, w, h, options) {
var arrowLength = 6,
halfDistance = 6,
r = Math.min((options && options.r) || 0, w, h),
safeDistance = r + halfDistance,
anchorX = options && options.anchorX,
anchorY = options && options.anchorY,
path;
path = [
'M', x + r, y,
'L', x + w - r, y, // top side
'C', x + w, y, x + w, y, x + w, y + r, // top-right corner
'L', x + w, y + h - r, // right side
'C', x + w, y + h, x + w, y + h, x + w - r, y + h, // bottom-right corner
'L', x + r, y + h, // bottom side
'C', x, y + h, x, y + h, x, y + h - r, // bottom-left corner
'L', x, y + r, // left side
'C', x, y, x, y, x + r, y // top-right corner
];
//bottom arrow
path.splice(23, 3,
'L', w / 2 + halfDistance, y + h,
w / 2, y + h + arrowLength,
w / 2 - halfDistance, y + h,
x + r, y + h
);
return path;
};
}(Highcharts));
在这里您可以看到它如何工作的示例:http://jsfiddle.net/ewget3wd/4/
关于javascript - Highcharts 避免工具提示上出现 "jump effect"和 "shared:true",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39374372/