Highcharts工具提示中的可点击链接 [英] Clickable link in tooltip of Highcharts

问题描述

我有一些工具提示，其中包含数据列表.我希望每个数据都是一个链接，该链接重定向到该特定数据的页面.现在，Highcharts工具提示的问题在于它随x轴的变化而变化. x轴更改后，工具提示将立即更改为x轴上的相应组件.因此，以防万一我的工具提示使用链接，一旦我单击链接，工具提示就会更改.为了解决这个问题，我想出了一种方法，可以在您单击工具提示后立即对其进行修复.这是代码.

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. As soon as x-axis changes, the tooltip changes to the respective component on the x-axis. 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);
                    }
                }
            }
        }
    },

但是即使如此，我仍然需要在工具提示中创建可单击的链接.我在stackoverflow上看到了一些完成它们的线程，但是它在那里也无法正常工作.它显示为链接，但它们不可单击.在此处发布一个有效的示例.

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. It shows them as links but they're not clickable. Posting a working example here.

JSFiddle工作示例

任何帮助将不胜感激.

- 这些都是我所拥有的系列.可能是由于其他图形而使工具提示被隐藏了.

Edit 1:- These are all the series that i have. 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}}

推荐答案

工具提示的useHTML属性应该在全局工具提示属性中定义-但对于<a>来说还不够.更改pointerEvents属性是必要的-您可以在此处查看问题: https://github.com/highcharts/highcharts/issues/5722

Tooltip's useHTML property should be defined in the global tooltip property - but for <a> is not sufficient. Changing pointerEvents attribute is necessary - you can see the issue here: https://github.com/highcharts/highcharts/issues/5722

tooltip: {
  useHTML: true,
  style: {
    pointerEvents: 'auto'
  }
},

示例: http://jsfiddle.net/SeCAB/216/

这篇关于Highcharts工具提示中的可点击链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！