web-dev-qa-db-ja.com

GoogleCharts-ツールチップの完全なhtml

フルHTMLを含むカスタムツールチップをGoogleChartsに表示させようとしています。

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

これが私が目指していることの小さな例です：

私が今持っているもの： plain text in tooltip

私が欲しいもの： picture in tooltip

この問題を解決する1つの方法は、ツールチップを無効にし、マウスオーバーイベントをキャプチャし、別のライブラリ（cluetipなど）を使用してツールチップをカーソルで表示することですが、GoogleChartsでこの種の機能を有効にするクリーンでネイティブな方法があるかどうか疑問に思いました。

また、グーグルチャートのポイントマーカーとしての画像についての他の質問もチェックしてください。

編集：

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

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

最新の編集が誰かを助けることを願っています。

javascriptchartsgoogle-visualization
14
JohnnyM

Googleは例を示します ここ 。

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

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

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

tooltip: {isHtml: true}

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

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

26
dmeehl

これは現在私のために働いています：

ステップ1：これらの設定の両方がチャートオプションに含まれていることを確認します。

// This line makes the entire category's tooltip active.
focusTarget: 'category',
// Use an HTML tooltip.
tooltip: { isHtml: true }

ステップ2：ツールチップをチャート列の1つに追加します。

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

ステップ3：データの適切な列にツールチップのHTMLを追加します。

chartReading.Push(chartSensorTooltip(obsDate, reading[1]));

メソッド「chartSensorTooltip（date、number）」は、各値のツールチップのHTMLを適切にフォーマットするために自分で作成したJSメソッドです。この種のメソッドを作成する必要はありませんが、上記の誰かが提案したように、作成すると、すべてのツールチップを同じ方法で非常に簡単にフォーマットできます。

FocusTargetのことは、私をつまずかせたものです。 HTH誰か！

3
Blamkin86

この機能は信じられないほどあいまいでした！前述のように、私にとって重要なのは、ツールチップを定義するために「addColumn（）」を使用するときに「、 'p'：{'html'：true}」を追加することでした。 'draw（）'オプション 'ツールチップ：{isHtml：true}'だけでは十分ではありません。

'addRows（）'に渡される 'graphItems'の配列を作成するときに、関数呼び出しを使用してHTML文字列を返すのは非常に便利です。

function myToolTip(row) {
    return '<div style="white-space: nowrap; padding:5px;"><b>' + row.name + '</b><br>' +
        '$' + row.worth + ' B, <b>' + _scope.sortBy + '</b>: ' + row[_scope.sortBy] + '</div>';
}

var graphItems = [];
angular.forEach(_scope.ForbesList, function(row, key) {
    graphItems.Push([key, row.worth, myToolTip(row)]);
});

var data = new google.visualization.DataTable();
data.addColumn('number', 'Rank');
data.addColumn('number', 'Worth');
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
data.addRows(graphItems);

詳細はこちら： https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content

3
Joseph Oster

列ではなく各行データに{p: {html: true}}を追加し、グラフ全体にisHtmlオプションを追加する必要がありました。

0
Ryo