3

グーグルの折れ線グラフを使用する場合、ポイントにカーソルを合わせると、そのポイントに関する情報が表示されます。たとえば、ポイントがにx:3, y:50あり、y軸がインチと呼ばれる場合、ポイントにカーソルを合わせると次のようになります。

.----------.
|3         |
|Inches: 50|
`----------`

データを取得するとき、各ポイントには追加の値も保存されます。したがって、私の配列は次のよう[[3, 50, 20], [4, 52, 22], [5, 54, 24]]になります。ホバーすると、次のようになります。

.----------.
|Time: 3   |
|Inches: 50|
|Extra: 20 |
`----------`

したがって、私が持っている2つの質問は次のとおりです。

  1. x値の前に「Time：」ラベルを追加するにはどうすればよいですか？
  2. 表示する3番目の値を追加するにはどうすればよいですか？

これが私が持っているコードです。これは、データを一緒に追加する代わりに2行目を作成します。ここを見て、私が何を意味するのかを確認できます。ポイントにカーソルを合わせると、ホバリングで何について話しているかを確認することもできます。これを行う簡単な方法があると確信していますが、何かが足りません。

function drawVisualization() {
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
      ['Time', 'Inches', 'Extra'],
      [  3   ,    50   ,    20  ],
      [  4   ,    52   ,    22  ],
      [  5   ,    54   ,    24  ]
    ]);

    // Create and draw the visualization.
    new google.visualization.LineChart(document.getElementById('visualization')).
        draw(data, {curveType: "function",
                    width: 500, height: 400,
                    vAxis: {title: 'Inches', maxValue: 10},
                    hAxis: {title: 'Time'}}
        );
}

google.setOnLoadCallback(drawVisualization);
4

2 に答える 2

3

オプションに「focusTarget：'category'」を追加してこれを解決しました：

draw(data,{..., focusTarget: 'category'}
于 2013-12-03T14:12:50.600 に答える
1

私は解決策を見つけました。データを繰り返すのは最も効率的な方法ではないので、これは私のお気に入りではありませんが、いずれにせよ、それは解決策なので、ここに投稿します。

最初の問題は、データテーブルの作成方法にありました。arrayToDataTable便利ですが、制限があります。だから私はそれから離れました。これにより、独自の列を追加して、これらの列を作成するときにわかりやすくすることができます。たとえば、これの鍵となるのは、を割り当てることroleです。そこで、グラフのプロットに使用する最初の2つの列を作成し、次に、のタイプstringと役割を持つ3番目の列を追加しましたtooltip。

ここでデータをチャートに追加すると、3番目の列に、ポイントにカーソルを合わせたときに表示したいものを正確に渡します。ここで繰り返しデータが出てきます。それほど大したことではありませんが、おそらくもっと良い/より直接的な方法があると思います。とにかく、ここに私の新しいチャートへのリンクがあり、ここに私のコードがあります：

function drawVisualization() {
    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Time');
    data.addColumn('number', 'Inches');
    data.addColumn({type: 'string', role: 'tooltip'});

    data.addRow(['3', 50, 'Time: 3\n Inches: 50\n Extra: 20']);
    data.addRow(['4', 52, 'Time: 4\n Inches: 52\n Extra: 22']);
    data.addRow(['5', 54, 'Time: 5\n Inches: 54\n Extra: 24']);

    // Create and draw the visualization.
    new google.visualization.LineChart(document.getElementById('visualization')).
        draw(data, {curveType: "function",
                    width: 500, height: 400,
                    vAxis: {title: 'Inches', maxValue: 10},
                    hAxis: {title: 'Time'}}
        );
}

google.setOnLoadCallback(drawVisualization);
于 2012-11-28T18:54:47.900 に答える