![](/img/trans.png)
[英]Add clickable link to tooltip in Highcharts Scatter Plot
[英]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上看到了一些線程,他們已經完成了它,但它也沒有在那里工作。 它將它們顯示為鏈接,但它們不可點擊。 在這里發布一個工作示例。
任何幫助,將不勝感激。
編輯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'
}
},
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.