Google チャート API でツールチップのスタイルを設定する方法はありますか? を使用してテキストの色のみを変更することができましたtooltip.textStyle
。白い背景を他の色に変更する解決策はありますか(写真に示すように):
テストプレイグラウンドhttp://jsfiddle.net/nyNAg/
Google チャート API でツールチップのスタイルを設定する方法はありますか? を使用してテキストの色のみを変更することができましたtooltip.textStyle
。白い背景を他の色に変更する解決策はありますか(写真に示すように):
テストプレイグラウンドhttp://jsfiddle.net/nyNAg/
セレンディピティを通じて解決策を見つけました:
<style>
path {
fill: yellow;
}
</style>
とにかく、Google チャート API で背景の構成オプションが見つかりませんでした。
Google チャートのオプションに次のコードを記述して、ツールチップを HTML で処理できるようにします。コード: tooltip: { isHtml: true }
(,) 必要に応じてコンマを追加します。:)
HTML と css を使用してツールチップのスタイルを設定できるようになりました。:)
/ CSS スタイリング/
ツールチップ ボックスのスタイルを設定するには:
div.google-visualization-tooltip {}
フォント サイズ、色などのコンテンツのスタイルを設定するには
div.google-visualization-tooltip > ul > li > span {}
必要なときにいつでも使用してください!important
;)
ラベルをカスタム HTML に完全に置き換えることができます。少し複雑かもしれませんが、コンテンツとスタイルを完全に制御できます。https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_contentを参照してください
別のオプションは、インラインスタイルのルールをオーバーライドすることです。
li.google-visualization-tooltip-item span[style] { font-weight: normal !important; }
Google Chart Tools API は、そのサーバーでホストされている iframe を介して SVG チャートを実装しているため、 Same Origin Policyに従って、クライアントに応答を送信する前にサーバー側で操作しない限り、別のドメインのコンテンツにアクセスしたり変更したりすることはできません。
それを考えると、どうやってテキストの色を変更できたのかわかりません - おそらくブラウザのバグですか?