我有一个 highcharts 图表,我允许用户动态创建自己的标志。现在,我希望能够单击该标志本身,并能够一直显示它的工具提示,直到我再次单击该标志。这样做的原因是为了允许用户赋予点特殊的含义,并且当他们将图形保存为图像时,我希望它显示他们留下的工具提示信息。
有人知道如何执行此操作或执行此操作吗?我不知道如何访问标志工具提示
plotOptions: {
series: {
allowPointSelect: true,
animation: false,
dataGrouping: {
force: true,
smoothed: true
}
},
line: {
allowPointSelect: true,
animation: false,
point: {
events: {
click: function () {
var thePoint = this;
var previousFlag = findFlag(thePoint);
if (previousFlag != null) {
previousFlag.remove();
} else {
createFlagForm(thePoint);
}
}
}
}
},
flags: {
point: {
events: {
click: function() {
//How to access the tooltip? this means the flag point itself
}
}
},
tooltip: {
useHTML: true,
xDateFormat: "%B-%e-%Y %H:%M"
}
}
},
我刚刚想好了这个。当您单击一个点时,它将保留工具提示。它通过克隆工具提示 svg 元素并将其附加到绘图中来实现此目的。
这是一个小提琴。
$(function () {
cloneToolTip = null;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
if (cloneToolTip)
{
chart.container.firstChild.removeChild(cloneToolTip);
}
cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
chart.container.firstChild.appendChild(cloneToolTip);
}
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
Mark 的解决方案非常出色,但这也取得了同样的效果:
tooltip: {
stickOnContact: false,
},
https://api.highcharts.com/highcharts/tooltip.stickOnContact