web-dev-qa-db-ja.com

Google Chartsツールチップのちらつき

Google Chartを使用している場合、ツールチップがマウスポインターの後ろに表示され、マウスを少しでも動かしたときにちらつきが発生することがあります。

これは既知の問題ですか？

enter image description here

javascriptgoogle-visualization
33
Arnaud

はい、それは小さなバグです。

これをCSSに追加するだけです。

svg > g > g:last-child { pointer-events: none }
108
NetVicious

はい、ちらつきは未解決の問題のようです。

https://github.com/google/google-visualization-issues/issues/2162

12
David Bradshaw

私の場合はうまくいきます

svg > g:last-child > g:last-child { pointer-events: none }
div.google-visualization-tooltip { pointer-events: none }
6
user2960190

パーティーに遅れましたが、これはフィルタリングツールチップのみを対象としており、クリップされたラベル（hAxisまたはvAxis）および凡例のhtmlデフォルトツールチップに影響を与えたり無効にしたりしません。

svg > g > g.google-visualization-tooltip { pointer-events: none }
0
Muhammad Sheraz

はい、そのとおりです。ツールチップはトリガー領域を覆い、ツールチップを非表示にします。ツールチップはトリガー領域を開き、再び表示します。

CSSを介してツールチップコンテナーをターゲットにし、GoogleのCSSを次のようにオーバーライドすることで解決しました。

div.google-visualization-tooltip {

    padding: 0 !important;
    margin: 0 !important;
    border:none !important;
    box-shadow: unset !important;
    background-color: rgba(0,0,0,0) !important;
    height:auto !important;
    overflow:hidden !important;

}

これにより、マウスポインターから約1em離れた場所にHTMLツールチップが表示され、元のい白いボックスを削除することもできます。カレンダーチャートで私のために働いた。これがうまくいかない場合は、チャートのツールチップコンテナのクラス名を調べる必要があります。

問題の根本は、ツールチップがポインターに近すぎて表示されることだと思いますが、そのコンテナのマージンとパディングを削除すると、それが修正されます。

それがあなたのために働くことを願っています。

0
Pavel Lebedeff