37

私の問題は、のチャート描画領域がハイチャートツールチップよりも小さい場合、ツールチップの一部がチャート描画領域をオーバーフローする場所に隠れてしまうことです。

グラフの描画領域のサイズに関係なく、ツールチップが常に表示されるようにしたいです。

CSS設定は役に立ちませんでしたし、より高いz-index設定も役に立ちませんでした。

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

どんな助けでも大部分は感謝されるでしょう。

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

4

8 に答える 8

26

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

.highcharts-container { overflow: visible !important; }
于 2012-11-25T09:35:26.727 に答える
15

OK、遅れてすみません。より良い解決策は見つかりませんでしたが、回避策を見つけました。

これが私がしたことと私がみんなに試すことを提案することです：

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'
}

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

于 2012-06-11T07:14:54.730 に答える
10

最新のアプローチ（Highcharts 6.1.1以降）は、単にtooltip.outside（API）を使用することです。

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

簡単に言うと、これは、この1つの値を次のように設定することを意味しますtrue。

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

この値を設定してスペース/クリッピングの問題を修正する方法については、このJSFiddleのデモを参照してください。true

于 2018-08-10T12:32:45.923 に答える
5

私の場合、このCSSを追加するだけでうまくいきました（テーブルセルのミニチャート）：

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

ツールチップオプションuseHtmlは必要ありませんでした：

tooltip: {
    useHTML: false
}

IE8 / 9とFF33.1の両方で動作します（FFが問題を引き起こしていました）。

于 2014-11-25T17:22:28.970 に答える
5

最近同じ問題が発生しましたが、ブートストラップコンテナがあります！（bs3）

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

ブートストラップ_normalizerプロパティによるものです

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

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

.highcharts-container, svg:not(:root) {
    overflow: visible !important;
}
于 2017-03-07T13:01:39.020 に答える
2

私は質問が古いことを知っていますが、私は自分の解決策を共有したかっただけです。それは他の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*/
}
于 2014-05-29T12:25:24.070 に答える
1

例を追加して、オーバーフローを機能させるために.highcharts-tooltip-boxを設定する必要がないことを証明したいと思います。

/* .highcharts-tooltip-box {
  visibility: inherit !important;
} */

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

デモ： https ：//jsfiddle.net/BlackLabel/3fubr1av/

于 2021-09-27T20:16:13.563 に答える
0

どの解決策も私にはうまくいきませんでした。ツールチップがチャートよりも大きい場合、ツールチップは表示されませんでした。

最終的に、Highchartsが実際にクラスのツールチップを非表示にしていることに気付きましたhighcharts-tooltip-box。そのため、解決策は、クラスのデフォルトを継承するようにツールチップを設定することです。

 .highcharts-tooltip-box {
    visibility: inherit !important;
  }

その後、オーバーフローを表示に設定する必要があります。

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

また、問題が発生した場合は、コンテナ内のz-indexを高く設定してください。

于 2021-09-27T06:52:27.080 に答える