15

完全な HTML を含む Google チャート表示カスタム ツールチップを作成しようとしています。

ツールチップを有効にして適切なデータを渡す方法を知っています-問題は-allowHTMLオプションが有効になっている場合でも、ツールチップはプレーンテキストとしてレンダリングされるため、たとえばツールチップに画像を表示できません。

ここに私がしようとしていることの小さな例があります:

私が今持っているもの:ツールチップのプレーンテキスト

私が欲しいもの:ツールチップの画像

この問題を解決する 1 つの方法は、ツールチップを無効にし、onmouseover イベントをキャプチャし、別のライブラリ (cluetip など) を使用してカーソル位置にツールチップを表示することですが、Google Charts でこの種の機能を有効にするためのクリーンでネイティブな方法があるかどうか疑問に思っていました。

また、Googleチャートのポイントマーカーとしての画像に関する私の他の質問もチェックしてください.

編集:

その間、この機能をカバーする非常に優れた非常に安価な (Web サイト ライセンスあたり 60 ドル) ライブラリを見つけました: Highcharts ライブラリ

例でわかるように、ツールヒントをフォーマットする関数を渡すことができます。ツールヒントのコンテンツを動的にロードするために使用できる URL を含む特別なプロパティを各データポイントに簡単に追加できます。その後、シリーズ内の各データ ポイントに追加のプロパティを追加することで、ツールヒントをキャッシュできます。この方法で実装しましたが、完全に機能します。

最新の編集が誰かに役立つことを願っています。

4

4 に答える 4

30

Google はここに例を示します。

列を html ツールチップに指定する必要があります。

data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

また、チャートに正しいオプションを渡す必要があります。

tooltip: {isHtml: true}

これを折れ線グラフでテストしましたが、機能します。

編集:これが機能するには、(少なくとも折れ線グラフの場合)チャートラッパーを使用する必要があるようにも見えます。ラッパーなしではオプションに従わせることができませんでした。

于 2012-11-16T16:51:39.080 に答える