Question

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

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

任何帮助都将非常感谢!!!

Answer 1

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

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/

Answer 2

就像Sebastian Bochan所提到的那样，它似乎是一个Safari问题，而不是一般的安全问题，它不允许使用javascript打开Windows。打开新窗口的请求需要用户启动，如点击链接，而不是通过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="http://www.google.com""

幸运的是，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

Answer 3

纯粹巧合我偶然碰到了这个资源。

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

Answer 4

仅仅使用HTML不够。

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

在Highcharts工具提示中链接

4 个答案: