アプリケーションでこのフィドルの動作を再現しようとしています。PCまたはMacを使用している場合、すべて正常に機能します。いくつかのタブレットでもテストしましたが、私のアプリの大規模なユーザー ベースである iPad では動作しません。
[http://jsfiddle.net/PLUpR/show/][1]
どんな助けでも大歓迎です!!!
アプリケーションでこのフィドルの動作を再現しようとしています。PCまたはMacを使用している場合、すべて正常に機能します。いくつかのタブレットでもテストしましたが、私のアプリの大規模なユーザー ベースである iPad では動作しません。
[http://jsfiddle.net/PLUpR/show/][1]
どんな助けでも大歓迎です!!!
Sebastian Bochan が述べたように、javascript を使用してウィンドウを開くことができないのは、一般的なセキュリティの問題ではなく、Safari の問題のようです。新しいウィンドウを開くリクエストは、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="http://www.google.com"" 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>
By pure coincidence i happened to come across this resource.
Add this code to your js script and it fixes the issues with clicking on mobile devices!! After adding this the iPad browser reacted to clicks on canvas and tooltips as expected.
ポイントアンドロード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/