web-dev-qa-db-ja.com

Highchartsツールチップオーバーフローは非表示

私の問題は、グラフの描画領域がハイチャートのツールチップよりも小さい場合、ツールチップの一部が非表示になり、グラフの描画領域からはみ出してしまうことです。

チャート描画領域のサイズに関係なく、常にツールチップを表示したい。

CSS設定も役に立たず、より高いz-index設定も役に立たなかった。

これが私の例です... http://twitpic.com/9omgg5

どんな助けも大いに感謝されます。

ありがとうございました。

javascriptjquerytooltiphighcharts
35
AlexRebula

遅れてすみません。より良い解決策を見つけることができませんでしたが、回避策を見つけました。

ここに私がやったことと、みんなに試してみることをお勧めします：

tooltip.useHTMLプロパティをtrueに設定（これで、htmlとCSSでより詳細に制御できます）。このような：

tooltip: {
    useHTML: true    
}

すべてのデフォルトのツールチップの設定を解除しますデフォルトのツールチップ機能と関係がある可能性があります。これが私がしたことです...

tooltip: {                        
    shared: false,
    borderRadius: 0,
    borderWidth: 0,
    shadow: false,
    enabled: true,
    backgroundColor: 'none'
}

チャートコンテナーのcssプロパティ "overflow"がvisibleに設定されていることを確認してください。また、チャートコンテナーを保持するすべてのDOM要素（div、sectionなど）にもcssがあることを確認してください「overflow」プロパティが「visible」に設定されています。このようにして、あなたのツールチップが彼の親と彼の他の「祖先」にあふれているとき、あなたのツールチップがいつでも見えるようにするでしょう（これは正しい用語ですか？:)）。

標準のCSSスタイルを使用して、必要に応じてツールチップフォーマッタをカスタマイズします。これが私がしたことです：

tooltip.formatter: {
    < div class ="tooltipContainer"> Tooltip content here < /div >
}

これはすべて次のようになります。

tooltip: {                        
    tooltip.formatter: {
        < div class ="tooltipContainer"> Tooltip content here < /div >
    },
    useHTML: true,
    shared: false,
    borderRadius: 0,
    borderWidth: 0,
    shadow: false,
    enabled: true,
    backgroundColor: 'none'
}

より良い解決策がある場合は、投稿してください。

13
AlexRebula

このCSSは私を助けました：

.highcharts-container { overflow: visible !important; }
25
qasem

最新のアプローチ（Highcharts 6.1.1以降）は、単にtooltip.outside（ [〜＃〜] api [〜＃〜] ）：

ツールチップがチャートのSVG要素ボックスの外側にレンダリングできるようにするかどうか。デフォルト（false）では、ツールチップはグラフのSVG要素内に描画され、ツールチップはグラフ領域内に配置されます。小さなチャートの場合、これによりクリッピングまたはオーバーラップが発生する可能性があります。 trueの場合、個別のSVG要素が作成されてページにオーバーレイされ、ツールチップをページ自体の内部に配置できます。

つまり、これは、この1つの値をtrueに設定することを意味します。次に例を示します。

Highcharts.chart('container', {
    // Your options...
    tooltip: {
        outside: true
    }
});

この値をtrueに設定すると、スペース/クリッピングの問題がどのように修正されるかについて このJSFiddleデモ を参照してください。

6
Halvor Holsten Strand

最近同じ問題が発生しましたが、bootstrap container！（bs3）

これらの解決策はどれもうまくいきませんでしたが、自分で見つけました。

bootstrap _normalizerプロパティによる

svg:not(:root) {
  overflow: hidden !important;
}

したがって、両方を追加します。

.highcharts-container, svg:not(:root) {
    overflow: visible !important;
}
5
kesm0

私の場合、このCSSを追加するだけで機能しました（表のセルのミニチャート）：

.highcharts-container svg {
    overflow: visible !important;
}

ツールチップオプションのuseHtmlは不要でした。

tooltip: {
    useHTML: false
}

IE8/9とFF33.1の両方で動作します（FFが問題の原因でした）。

5
Kloe2378231

私は質問が古いことを知っていますが、私の解決策を共有したかっただけです。それは他の2つの答えに基づいていますが、このコードで見栄えの良い結果が得られると思います。

ツールチップオプション：

tooltip: {
   useHTML: true,
   shared: false,
   borderRadius: 0,
   borderWidth: 0,
   shadow: false,
   enabled: true,
   backgroundColor: 'none',
   formatter: function() {
      return '<span style="border-color:'+this.point.color+'">' + this.point.name + '</span>';
   }
}

CSS：

.highcharts-container { 
    overflow: visible !important; 
}

.highcharts-tooltip span>span {
    background-color:rgba(255,255,255,0.85);
    border:1px solid;
    padding: 2px 10px;
    border-radius: 2px;
}

#divContainerId .highcharts-container{
    z-index: 10 !important; /*If you have problems with the label hiding behind some other div or chart play with z-index*/
}
2
nsacerdote