我有一个 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 元素并将其附加到绘图中来实现这一点。
这是一个 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]
}]
});
});
关于javascript - Highcharts - 在点击时保持工具提示显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11476400/