javascript Highcharts - 点击时保持工具提示显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11476400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts - Keep tooltip showing on click
提问by user1473053
I have a highcharts graph, and I allowed the user to dynamically create their own Flags. Now I want to be able to click on the flag itself and be able to keep it's tooltip showing the whole time until I click on the flag again. The reason for this is to allow the user to give special meaning to points, and when they save the graph as an image, I want it to show the tooltip information they left on.
我有一个 highcharts 图，我允许用户动态创建他们自己的标志。现在我希望能够点击标志本身并能够保持它的工具提示始终显示，直到我再次点击标志。这样做的原因是为了让用户赋予点特殊的含义，当他们将图形保存为图像时，我希望它显示他们留下的工具提示信息。
Anyone know how to do this or go about this? I can't figure out how to access the flags tooltip
任何人都知道如何做到这一点或去做这件事？我不知道如何访问标志工具提示
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"
}
}
},
回答by Mark
I just whipped this up. When you click a point it will persist the tooltip. It does this by cloning the tooltip svg element and appending it to the plot.
我只是把这个搞砸了。当您单击一个点时，它会保留工具提示。它通过克隆工具提示 svg 元素并将其附加到绘图中来实现。
Here's a fiddle.
这是一个小提琴。
$(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]
}]
});
});?
