23

Google Visualization Bar Chartを使用しています。バーをクリックしたときに表示されるツールチップ テキストとフォーマットをカスタマイズまたは変更したいと考えています。

ドキュメントを調べましたが、これを実装する方法が見つかりませんでした。あなたは知っていますか：

  1. それは可能ですか？
  2. もしそうなら、いくつかのコード例を提供できますか?
4

11 に答える 11

29

google.visualization.NumberFormatクラスを使用して、数値のフォーマット方法を変更できます。

var formatter = new google.visualization.NumberFormat({
    fractionDigits: 0,
    prefix: '$'
});

formatter.format(data, 1); // Apply formatter to second column.

もっと柔軟性が必要な場合は、PatternFormatクラスを見てください。

API リファレンスは次のとおりです。

于 2010-11-09T01:05:58.160 に答える
4

ツール ヒントに必要な新しいデータ型を作成します。

var data = new google.visualization.DataTable();
data.addColumn('string', 'Game');
data.addColumn('number', 'Transactions');
data.addColumn({type:'string', role:'tooltip'}); // here is the tooltip line

ツールチップに必要な情報をデータに追加します。

['$FormatedWeekday', $SalesAll,'$ToolTip']
['$FormatedWeekday', $SalesAll,'$ToolTip']
['$FormatedWeekday', $SalesAll,'$ToolTip']

トール チップのすべてのデフォルト データが失われるため、再パッケージ化することをお勧めします。

$ToolTip = ''.$FormatedWeekday.' \u000D\u000A '.$SalesAll.' \u000D\u000A '."Red Cross  Event";

「\u000D\u000A」は改行を強制します

于 2012-03-07T00:54:34.647 に答える
3

Google Chart は、HTML ツールチップ LineChart、BarChart の形式をサポートしていません。私が使う：

google.visualization.events.addListener(chart, 'onmouseover', function(rowColumn){
                                myFunction();
                            });

in :詳細情報を表示するためにmyFunction()使用できます。popup

于 2012-09-24T10:10:56.857 に答える
3

それを行うには非常に簡単な方法がありますFormatters。データに次のいずれかを使用するだけです。

// Set chart options
var options = {
hAxis: {format: 'MMM dd, y'}
};

// Format the data
var formatter = new google.visualization.DateFormat({pattern:'EEEE, MMMM d, y'});
formatter.format(data,0);

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.AreaChart(document.getElementById('visualization'));
chart.draw(data, options);

データ形式はマウスオーバーしたときにのみ表示されるため、軸をデータ形式とは異なる形式にするだけです。

于 2012-11-14T16:02:23.190 に答える
3

私はGoogleの円グラフで同様のことをしようとしていました. 元のコードでは、マウスオーバーすると、ツールチップにラベル、生の数値、パーセンテージが表示されていました。

元のコードは次のとおりです。

data.setValue(0, 0, 'クリスマス ツリー');

data.setValue(0, 1, 410000000);

ツールチップには「クリスマス ツリー 410000000 4.4%」と表示されます。

テキストをフォーマットするために、コードに行を追加したので、次のようになりました。

data.setValue(0, 0, 'クリスマス ツリー');

data.setValue(0, 1, 410000000);

data.setFormattedValue(0, 1, "4億1000万ドル");

その結果、「クリスマス ツリー 4 億 1000 万ドル 4.4%」というツールチップが表示されました。

これが役立つことを願っています！

于 2010-09-28T19:52:10.853 に答える
2

もう 1 つの方法は、ツールヒントとして機能する別の列をデータに追加することです。

function drawVisualization() {
    data = new google.visualization.DataTable()
    data.addColumn('string', 'Date');
    data.addColumn('number');
    data.addColumn({type:'string',role:'tooltip'});
    data.addRow();
    base = 10;
    data.setValue(0, 0, 'Datapoint1');
    data.setValue(0, 1, base++);
    data.setValue(0, 2, " This is my tooltip1 ");

    data.addRow();
    data.setValue(1, 0, 'Datapoint2');
    data.setValue(1, 1, base++);
    data.setValue(1, 2, "This is my second tooltip2");

    // Draw the chart.
    var chart = new google.visualization.BarChart(document.getElementById('visualization'));
    chart.draw(data, {legend:'none', width:600, height:400});
}
于 2012-03-15T20:53:31.057 に答える
2

参考までに、すべて:

Google は 2012 年 9 月にカスタム HTML/CSS ツールチップを追加しました: https://google-developers.appspot.com/chart/interactive/docs/customizing_tooltip_content

于 2013-01-15T16:17:50.647 に答える
0

DataTable Roles とツールチップの例をご覧ください: https://developers.google.com/chart/interactive/docs/roles

label: 'Year',   'Sales',         null,   'Expenses',         null
`role: domain,     data,       tooltip,         data,      tooltip`
     '2004',       1000,    '1M$ sales,          400,    '$0.4M expenses
                       in 2004'                     in 2004'
     '2005',       1170, '1.17M$ sales,          460,    '$0.46M expenses
                        in 2005'                    in 2005'
     '2006',        660,  '.66M$ sales,         1120,    '$1.12M expenses
                        in 2006'                    in 2006'
     '2007',       1030, '1.03M$ sales,          540,    '$0.54M expenses
                        in 2007'                    in 2007'

nullラベルは、それぞれ「売上」と「経費」のツールチップとして使用されます。

于 2012-09-24T17:30:44.263 に答える
0

それを無効にする唯一の方法は、ホバーハンドラーでDOMをトラバースすることでした（とにかく円グラフの場合）：

$(pie.Ac.firstElementChild.contentDocument.childNodes[0].childNodes[2].childNodes[1].firstChild.childNodes[2]).remove();

これは恐ろしく、既存の構造をGoogleが維持することの対象となります...もっと良い方法はありますか?

于 2010-09-15T07:32:59.840 に答える
0

私も同じオプションを探していました。直接的な方法はないようです。ただし、デフォルトのツールチップを無効にして、SelectHandler を使用して独自のバージョンをポップアップすることができます。より良い/直接的な方法を見つけた場合はお知らせください。ありがとう

于 2010-02-12T19:25:00.867 に答える