Highcharts工具提示中的可点击链接
Clickable link in tooltip of Highcharts
我有一个包含数据列表的工具提示。我希望每个数据都是一个链接,重定向到该特定数据的页面。Highcharts工具提示的问题是它会随x轴变化。一旦x轴发生变化,工具提示就会变为x轴上的相应组件。所以,如果我得到我的工具提示与链接工作,只要我移动到点击链接,工具提示改变。为了解决这个问题,我想出了一种方法来修复工具提示,只要你点击工具提示。这里是代码。
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);
}
}
}
}
},
但即使这样,我需要使工具提示中的链接是可点击的。我在stackoverflow上看到了一些线程,他们已经做到了,但它也不工作。它将它们显示为链接,但它们是不可点击的。在这里张贴一个工作示例。
JSFiddle工作示例
如有任何帮助,不胜感激。
编辑1:-这些是我所有的级数。可能是工具提示被隐藏了,因为一些其他的图表。
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}}
工具提示的useHTML属性应该在全局工具提示属性中定义-但对于<a>
是不够的。更改pointerEvents属性是必要的-您可以在这里看到问题:https://github.com/highcharts/highcharts/issues/5722
tooltip: {
useHTML: true,
style: {
pointerEvents: 'auto'
}
},
示例:http://jsfiddle.net/SeCAB/216/
相关文章:
- 多行链接中引导工具提示的解决方法
- 屏幕上浮动的链接上的qtip2工具提示
- 如何在不重新加载页面的情况下在醉酒的工具提示中创建自关闭链接
- 根据用户单击的链接更改提示文本
- 当我们单击多个图像链接时,将在同一页面上显示多个工具提示
- 整页.js - 在工具提示中添加链接
- 3d.js(力)-获取工具提示链接上的当前鼠标位置
- 如何将引导工具提示与图像链接一起使用
- 带有链接的jQuery工具提示
- 带有HTML链接的nvd3工具提示
- 在d3js的力有向图的链接上显示工具提示
- 当指定位置时,jQuery工具提示会在链接上闪烁
- 显示了跟随工具提示的链接,但并没有把我带到那里
- 点击链接关闭工具提示;如何预防这种情况
- 鼠标悬停时链接两个元素和双工具提示
- 在Dojo中单击链接打开一个弹出窗口或工具提示
- 默认情况下,"缝合线链接"工具提示不可见
- 在网站点击三个链接后提示用户
- 单击链接时提示用户确认
- 如何从ckeditor中删除链接工具栏