Highcharts 工具提示内的链接答案

【问题标题】：Link inside of a Highcharts tooltipHighcharts 工具提示内的链接
【发布时间】：2014-03-15 17:11:28
【问题描述】：

我正在尝试为我的应用程序复制这个小提琴的行为。当我在 PC 或 Mac 上时，一切正常。我还在一些平板电脑上进行了测试，但它不想在 iPad 上运行，因为 iPad 是我的应用程序的庞大用户群。

[http://jsfiddle.net/PLUpR/show/][1]

任何帮助将不胜感激！！！

【问题讨论】：

您是否在 ipad 上尝试过不同的浏览器？ Safari 与 Chrome？
是的，我做到了。它也不起作用。
我在 iPad (iOS 7.0.3) 上测试过，一切正常，请问你是哪个版本的？
在 iPad 和 iPhone (iOS 7.1) 上试用过。也许这个问题并不清楚。小提琴出现了，但小提琴的重点是在这种情况下，有一个带有链接的数据标签，里面有一个链接到谷歌。在 PC 上，我可以单击链接，它会转到该页面，但在 iPad 上它没有反应......
你真的应该考虑把你已经做过的事情放上来。这会有所帮助。

标签： jquery highcharts lazy-high-charts

【解决方案1】：

您可以在该点上捕获点击事件并加载 url 链接。

data : [{
                x : Date.UTC(2011, 3, 25),
                title : 'H',
                url: 'http://www.google.com',
                text : 'google'
            }],
            point:{
                events:{
                    click: function(){
                        var url = this.url;
                        window.open(url,'_blank');
                    }
                },
            },

查看示例：http://jsfiddle.net/PLUpR/3/

【讨论】：

谢谢塞巴斯蒂安。这对于 PC 体验来说是正确的。但是在 iPad 上，您必须单击一个点才能显示工具提示，这意味着您显示工具提示并立即将人发送到另一个页面。我需要能够显示工具提示，如果他们想点击链接，那么这是一个选择。
一般来说，它看起来像是 javascript 中的 window.open 的问题。我准备了适用于 PC 的示例 (jsfiddle.net/PLUpR/12) 相关主题 stackoverflow.com/questions/9880316/…

【解决方案2】：

就像 Sebastian Bochan 提到的，这似乎是一个 Safari 问题，而不是一般的安全问题，它不允许使用 javascript 打开窗口。打开新窗口的请求需要像点击链接一样由用户发起，而不是通过 javascript 代码块；

虽然您已将文本设置为

<a href="http://www.google.com"> google </a>

Highcharts 为工具提示中的链接生成 SVG 跨度，并且该跨度具有打开一个窗口的 onclick 处理程序。请参阅下面为标志工具提示生成的默认 html/svg

<text x="8" y="21" zIndex="1" style="font-size:12px;color:#333333;width:200px;fill:#333333;">      
   <tspan style="font-size: 10px" x="8">Monday, Apr 25, 2011</tspan>
   <tspan onclick="location.href=&quot;http://www.google.com&quot;" x="8" dy="16" style="cursor: pointer;"> google </tspan>
</text>

Safari 将禁止 onclick="location.href=&quot;http://www.google.com&quot;"

幸运的是，Highcharts 允许您跳过 SVG，并在工具提示中使用直接 html。您需要做的就是将tooltip.useHTML 设置为true，默认情况下为false。瞧，现在为工具提示生成了以下 HTML，我相信 Safari 不会有这个问题，以为我自己无法尝试这个

<div class="highcharts-tooltip" style="position: absolute; left: 912px; top: 70px; visibility: visible;">
   <span style="position: absolute; white-space: nowrap; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); margin-left: 0px; margin-top: 0px; left: 8px; top: 8px;" zindex="1">
     <span style="font-size: 10px">Sunday, Mar 24, 18:34:45</span><br>
       <a href="http://www.google.com"> google </a><br>
   </span>
</div>

Demo @ jsFiddle

【讨论】：

【解决方案3】：

纯属巧合，我碰巧遇到了这个资源。

将此code 添加到您的 js 脚本中，它可以解决点击移动设备的问题！！添加后，iPad 浏览器会按预期对画布和工具提示的点击做出反应。

【讨论】：

很高兴您找到了可行的解决方案。我提供的使用 HTML 的解决方案不起作用吗？想知道答案的反馈，因为我没有 iOS 设备来测试自己
很遗憾没有。这似乎与 iPad 解释捏合、点击和缩放等的方式有关。因此出现了问题。在 PC 上，这可以正常工作，就像在最初的小提琴中一样，但是对于触摸，这些事件会发生变化并且不会以相同的方式做出反应。感谢您的建议，谢谢！
有趣。感谢您的反馈。

【解决方案4】：

仅仅使用 HTML 是不够的。

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

【讨论】：