2013-12-13 10 views
6

ハイチャートのツールチップに、useHTMLを使ってzIndexを置いて別のHTML要素に配置しようとしています。 - の代わりに、その下に、私は、ツールチップがピンク色のボックスの上に行きたいhttp://jsfiddle.net/sDu8V/highchartsツールチップz-インデックス

このフィドルを参照してください。

私には何が欠けていますか?グラフ全体がtotalllyいずれかを超えるかまたは両方あなたのピンクの下にある単一のSVGオブジェクトに描画されているので

答えて

11

考えられる解決策:http://jsfiddle.net/sDu8V/1/

必要なCSS:

.highcharts-container { 
    position: inherit !important; 
} 
.highcharts-tooltip { 
    z-index: 9998; 
} 

@Piotr4.1.xの更新されたデザインに感謝します。

+0

申し訳ありません@PawełFus、しかし、私はこれがどのように問題を解決しているのか分かりません。 jsfiddleでは、まだピンクのボックスがツールチップを覆っていて、ツールチップを変更することはできません。私はChromeとSafariでテストしました。確認して確認していただけますか? – frandevel

+0

ホバーIE - >ツールチップはピンクのボックスの上に表示されます。 –

+1

あなたのソリューションにマイナーな変更を加えました:http://jsfiddle.net/sDu8V/24/マージンを削除し、改善されたコンテンツツールチップ。 – Piotr

2

あなたはピンクの箱の上にレンダリングされ得るためにのみツールチップを持つことができません。

あなたができることは、背景を透明にして、ピンク色のボックスの上にチャート全体をレンダリングすることです。

あなたのチャート:

chart: { backgroundColor:'transparent' } 

あなたのdivも、チャートの下に次のようになります。

<div id="box" style="z-index:0"></div> 

ライブ例:http://jsfiddle.net/7TcJ6/