如何解决在缩放或调整大小时/之后如何移动HighStock克隆的工具提示
我知道如何克隆HighStock工具提示并使其可见。只要图表的几何形状是静态的就可以。
但是,缩放/缩放/调整图表大小时,静态克隆的工具提示不再与图表一致。如何更新其位置?我猜想在xAxis.events.afterSetExtremes函数的事件处理程序中,但是现在我被困住了。
提琴:http://jsfiddle.net/jakobvinther/xhLtr2cg/
$(function () {
cloneToolTip = null;
chart = new Highcharts.stockChart('container',{
chart: {
renderTo: 'container',},title: {
text: 'Click on the highlighted point to clone the tooltip.<br>Then zoom or resize. How to update the cloned tooltip position?'
},plotOptions: {
series: {
point: {
events: {
click: function() {
if (cloneToolTip)
{
chart.container.firstChild.removeChild(cloneToolTip);
}
cloneToolTip = chart.tooltip.label.element.cloneNode(true);
chart.container.firstChild.appendChild(cloneToolTip);
}
}
}
},xAxis:{
events: {
afterSetExtremes: function() {
// ***** probably update the cloneToolTip position here *****
}
}
}
},series: [{
data: [1,4,3,2,1]
}]
});
});
解决方法
我认为,单击以触发工具提示并在重绘图表时使其可见的更好方法是以下配置:http://jsfiddle.net/BlackLabel/e8aboymw/
Highcharts.wrap(Highcharts.Tooltip.prototype,'hide',function(proceed) {});
Highcharts.wrap(Highcharts.Tooltip.prototype,'refresh',function(proceed,point,event,click) {
if (click) {
proceed.apply(this,Array.prototype.slice.call(arguments,1));
}
});
let curPoint,curE;
Highcharts.chart('container',{
chart: {
events: {
render() {
if (curPoint && curE) {
this.tooltip.refresh(curPoint,curE,true)
}
}
}
},series: [{
type: 'column',data: [43934,52503,57177,69658,97031,119931,137133,154175],point: {
events: {
click: function(e) {
curPoint = this;
curE = e;
this.series.chart.tooltip.refresh(this,e,true);
}
}
}
}]
});
有关包装的更多信息:https://www.highcharts.com/docs/extending-highcharts/extending-highcharts#wrapping-up-a-plugin
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。