6

私はこの一例を持っています:

// Load the Visualization API and the piechart package.
        google.load('visualization', '1.0', {'packages':['corechart']});

        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart1);

        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart1() {
            var data = new google.visualization.DataTable(
            {
                cols: [
                    {id: 'A', label: 'A', type: 'number'},
                    {id: 'B', label: 'B', type: 'number'},
                    {id: 'C', label: 'C', type:'tooltip', p:{role:'tooltip'}}
                ],
                rows: [
                    {c:[{v: 2}, {v: 3}, {v:'Allen'}]},
                    {c:[{v: 4}, {v: 2}, {v:'Tom'}]},
                    {c:[{v: 1}, {v: 3}, {v:'Sim'}]}

                ]
            })

            var options = {
                title: 'Age vs. Weight comparison',
                hAxis: {title: 'Age', minValue: 1, maxValue: 5},
                vAxis: {title: 'Weight', minValue: 1, maxValue: 5},
                legend: ''
            };

            var chart = new google.visualization.ScatterChart(document.getElementById('chart_scatter_container'));
            chart.draw(data, options);
        }

http://jsfiddle.net/eAWcC/1/

データを一度ホバーすると、ツールチップにこのデータのラベルが表示されます。それはいいです。

しかし、すべての値が異なる色で凡例に配置されていることを確認したいと思います。

例

どうやってするの？

4

1 に答える 1

9

散布図のデータ テーブル内の列は、凡例に表示される列であり、異なる色で表示されます。それらを個別に表示するには、各人が独自の列を持つようにデータを再配置する必要があります。

たとえば、データ テーブル変数を次のように置き換えます。

            var data = google.visualization.arrayToDataTable([
              ['x', 'Allen', 'Tom', 'Sim'],
              [1, null, null, 3],
              [2, 3, null, null],
              [4, null, 2, null],
            ]);

これを行うと、目的の出力が得られます（ここを確認してください）。

ただし、この方法の問題は、各シリーズに多数の「null」値が含まれることです (単一のポイントしかないため)。このプロセスを簡素化するために、ループを記述してデータを処理し、新しいテーブルに合わせて適切にフォーマットすることができます。基本的なコードは次のようになります。

  1. X 値の列を新しいテーブルに追加する
  2. 列 2 (ツールヒント) の行ごとに、新しいテーブルに新しい列を作成します。
  3. 列 1 (Y 値) の各行について、斜め下/右に塗りつぶします

これは次のようになります。

          var newTable = new google.visualization.DataTable();

          newTable.addColumn('number', 'Age');
          for (var i = 0; i < data.getNumberOfRows(); ++i) {
            newTable.addColumn('string', data.getValue(i, 2));
            newTable.addRow();
          }

          for (var j = 0; j < data.getNumberOfRows(); ++j) {
            newTable.setValue(j, j + 1, data.getValue(j, j + 1));
          }

(上記のコードはテスト済みですが、私の理解を超えた理由で 2 番目の for() ループは好きではありません)。

于 2013-01-18T02:54:13.110 に答える