[英]Clickable link in tooltip of Highcharts
I have tooltips having a list of data in it. 我有工具提示,里面有数据列表。 I want each data to be a link which redirects to the page for that particular data.
我希望每个数据都是一个重定向到该特定数据页面的链接。 Now the problem with Highcharts tooltip is that it changes with respective to the x-axis.
现在Highcharts工具提示的问题在于它随x轴的变化而变化。 As soon as x-axis changes, the tooltip changes to the respective component on the x-axis.
一旦x轴改变,工具提示就会改变为x轴上的相应组件。 So in case i get my tooltip working with links, as soon as i move to click the link, the tooltip changes.
因此,如果我的工具提示使用链接,只要我移动到单击链接,工具提示就会更改。 To tackle this I figured out a way to fix the tooltip as soon as you click on the tooltip.
为了解决这个问题,我找到了一种方法来在您点击工具提示时立即修复工具提示。 Here is the code for that.
这是代码。
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);
}
}
}
}
},
But even then i need to make the links in the tooltip which are clickable. 但即便如此,我还需要在工具提示中创建可点击的链接。 I saw some threads on stackoverflow where they have done it, but its not working there also.
我在stackoverflow上看到了一些线程,他们已经完成了它,但它也没有在那里工作。 It shows them as links but they're not clickable.
它将它们显示为链接,但它们不可点击。 Posting a working example here.
在这里发布一个工作示例。
JSFiddle working example JSFiddle工作示例
Any help would be appreciated. 任何帮助,将不胜感激。
Edit 1:- These are all the series that i have. 编辑1: - 这些都是我拥有的系列。 May be the tooltip is getting hidden because of some other graph.
由于其他一些图形,可能是工具提示被隐藏了。
series: [{
type: 'column',
name: 'Success',
color: '#7deda2',
yAxis: 1,
tooltip: {
pointFormatter: function(){
return "Success: " + this.y + "%" + "<br />" + "Success docs: " + toolTipSuccess[this.series.data.indexOf( this )] + "<br />";
}
},
data: [{{barSuccess}}]
},
{
type: 'scatter',
name: 'Incidents',
yAxis: 1,
data: scatterData,
color: '#FFAE19',
tooltip: {
pointFormatter: function() {
var string = '';
Highcharts.each(toolTip[this.series.data.indexOf(this)], function(p) {
string += '<a href="http://www.google.com">' + p + '</a><br>'
});
return string + "<br />";
}
},
},
{
type: 'spline',
name: 'Failure',
tooltip: {
pointFormatter: function(){
return "Failure: " + this.y + "%" + "<br />" + "Failure docs: " + toolTipFailure[this.series.data.indexOf( this )] + "<br />";
}
},
data: [{{barFailure}}],
marker: {
lineWidth: 3,
lineColor: Highcharts.getOptions().colors[8],
fillColor: 'red'
}
},
{{#if lu}}
{
type: 'spline',
name: 'Unknown',
tooltip: {
pointFormatter: function(){
return "Unknown: " + this.y + "%" + "<br />" + "Unknown docs: " + toolTipUnknown[this.series.data.indexOf( this )] + "<br />";
}
},
data: [{{barUnknown}}],
marker: {
lineWidth: 3,
lineColor: 'blue',
fillColor: '#87CEFA'
}
}
{{/if}}
Tooltip's useHTML property should be defined in the global tooltip property - but for <a>
is not sufficient. 工具提示的useHTML属性应该在全局工具提示属性中定义 - 但是对于
<a>
是不够的。 Changing pointerEvents attribute is necessary - you can see the issue here: https://github.com/highcharts/highcharts/issues/5722 更改pointerEvents属性是必要的 - 您可以在此处查看问题: https : //github.com/highcharts/highcharts/issues/5722
tooltip: {
useHTML: true,
style: {
pointerEvents: 'auto'
}
},
Example: http://jsfiddle.net/SeCAB/216/ 示例: http : //jsfiddle.net/SeCAB/216/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.