2

Google 散布図で選択したエンティティのツールチップを取得しようとしています。次のようにデータテーブルを作成します。

data = google.visualization.arrayToDataTable([
    ['Lines changed', 'TTL', 'Tooltip'],
    [25, 12, 'Text for first'],
    [34, 20, 'Text for second']
]);

そして、選択したものにアクセスできます

google.visualization.events.addListener(chart, 'select', function () {
    // when a point is selected
    var selection = chart.getSelection();
    console.log(data.getValue(selection[0].row, selection[0].column)); // this gives me the Y-value for that row and index
});

Y値の代わりにその行とインデックスからツールチップテキストを取得する方法を知っている人はいますか?

編集

次のように column プロパティを設定することで、メソッドを使用してツールチップを追加できます。arrayToDataTable()

data.setColumnProperty(2, 'role', 'tooltip');

これにより、3 列目 (インデックス 2) がツールヒントになります。上記の方法を使用してツールチップに HTML を (簡単に) 追加できないというだけです。new google.visualization.DataTable()代わりに使用に戻さなければなりませんでした。

4

2 に答える 2

8

を使用してチャートにツールチップを追加することはできませんarrayToDataTable。ドキュメントが言うように：

google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)

twoDArray :各行がデータ テーブル内の行を表す2 次元配列。opt_firstRowIsData が false (デフォルト) の場合、最初の行はヘッダー ラベルとして解釈されます。各列のデータ型は、指定されたデータから自動的に解釈されます。セルに値がない場合は、必要に応じて null または空の値を指定します。Date または DateTime 値、または JavaScript リテラル オブジェクト表記をセル値に使用することはできません。

代わりにaddColumn/を使用してください:addRows

function drawVisualization() {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('number', 'Lines changed');
    dataTable.addColumn('number', 'TTL');

    // column for tooltip content
    dataTable.addColumn({type: 'string', role: 'tooltip'});

    dataTable.addRows([
        [25, 12, 'Text for first'],
        [34, 20, 'Text for second']
    ]);

    // create and draw the visualization.
    var chart = new google.visualization.ScatterChart(document.getElementById('visualization'));
    chart.draw(dataTable);
}
google.setOnLoadCallback(drawVisualization);

上記のコードは、次の散布図を生成します。

ここに画像の説明を入力

アップデート

質問を完全に忘れていました:-)クリックイベントでツールチップを抽出する方法は次のとおりです(コードとほぼ同じで、代わりにdataTableをアドレス指定するだけです):

google.visualization.events.addListener(chart, 'select', function() {
    var selection = chart.getSelection();
    // this gives you 'Text for first' / 'Text for second' etc
    console.log(dataTable.getValue(selection[0].row, 2)); 
});
于 2013-08-15T12:48:24.567 に答える
2

上記のdavidkonradの回答に加えて、複数のデータシリーズがあり、選択したデータポイントに関連付けられたツールチップ文字列に具体的にアクセスしたい場合は、これを行うことができます:

google.visualization.events.addListener(chart, 'select', function () {
    // when a point is selected
    var selection = chart.getSelection();
    console.log(data.getValue(selection[0].row, selection[0].column + 1));
});

これは、すべてのデータ シリーズにカスタム ツールヒント列が関連付けられていることを前提としています。

于 2013-08-15T16:16:17.493 に答える