web-dev-qa-db-ja.com

Google縦棒グラフに行/列を動的に追加する方法

Google Visualization APIを使用して縦棒グラフを作成したいのですが、データを送信して、グラフのDataTableに配列形式で入力できます。しかし、配列に含まれるものに応じて、列/行の数が可変のチャートを生成する必要があります。また、それらを正しく反復してDataTableに追加する方法がわかりません。

以下は、静的データを解析してグラフを生成する例です（これはすべてJavaScriptで行われます）。

var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);

APIには、列と行を追加するための次のメソッドがあります。-上記と同じデータを取得するための別のメソッド：

var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([  ['2004', 1000 , 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007',1030,540]
  ]);

私が必要とするのは、送信する配列リストを反復処理して動的に行コンテンツを追加するためのforループまたはdouble forループです。

より正確に言えば、あるデータを上記のように書いて、他の場合は次のようにするとします。

['Year', 'Sales', 'Expenses' , 'Other'],
['2004',  1000,      400     ,  232   ],
['2005',  1170,      460    ,  421   ],
['2006',  660,       1120    ,  4324  ],
['2007',  1030,      540     ,  4234  ],
['2008',  1530,      50     ,    234  ],

したがって、関数のパラメーターを介してこれらのデータを解析し、各行を含む多くのarraylistsを行おうとします（これが正しいアイデアかどうかはわかりません）。Row1 = ['2004'、1000、400、232] Row2 = [' 2005 '、1170、460、421]および....

Forループまたはdouble forループを使用して、動的に送信する配列リストを反復して、データを含むデータテーブル（行と列の数が可変）を生成するにはどうすればよいですか？

javascriptgoogle-apivisualization
11
Adrian Bob

これが jsfiddle の実用的な解決策です。

次の関数を見てください。これはデータの配列を反復処理し、グラフを更新します。

// function to update the chart with new data.
      function updateChart() {

          dataTable = new google.visualization.DataTable();

          var newData = [['Year', 'Sales', 'Expenses' , 'Other'],
            ['2004',  1000,      400     ,  232   ],
            ['2005',  1170,      460    ,  421   ],
            ['2006',  660,       1120    ,  4324  ],
            ['2007',  1030,      540     ,  4234  ],
            ['2008',  1530,      50     ,    234  ]];

          // determine the number of rows and columns.
          var numRows = newData.length;
          var numCols = newData[0].length;

          // in this case the first column is of type 'string'.
          dataTable.addColumn('string', newData[0][0]);

          // all other columns are of type 'number'.
          for (var i = 1; i < numCols; i++)
            dataTable.addColumn('number', newData[0][i]);           

          // now add the rows.
          for (var i = 1; i < numRows; i++)
            dataTable.addRow(newData[i]);            

          // redraw the chart.
          chart.draw(dataTable, options);        

      }
22
Greg Ross
var obj = JSON.parse(r.d);//Json data will come from any web service or any other source
 var data2 = new google.visualization.DataTable();    
 //To Add Column Dynamically

    for (var j = 0; j < array.length; j++) // this array contains columns
     {
      if (j == 0)
      {
          data2.addColumn(typeof (array[j]), array[j]);
      }
     else
       {
          data2.addColumn('number', array[j]);//if 2nd column must be integer
       } 
    }   
     //   To Add Rows Dynamically to a google chart  

                 data2.addRows(obj.length);\\Total Rows
                     for (var i = 0; i < obj.length; i++)
                     {
                        for (var k = 0; k < array.length; k++)//Total Column 
                         {
                           if (k == 0) 
                             {
                               data2.setCell(i, k, obj[i][array[k]].toString());//if first Column is String
                             } 
                              else
                             {
                               data2.setCell(i, k, parseInt([obj[i][array[k]]]));//if other columns are int type... for charts mostly we treat just first column as string
                             }
                         }
                    }
1
Khurram Gulzar

データを1つの文字列に入れ、JSON.parse（stringData）を使用できます。年の列は二重引用符で囲む必要があります

var data = new google.visualization.DataTable();  
data.addColumn('string', 'Year');  
data.addColumn('number', 'Sales'); 
data.addColumn('number', 'Expenses'); 

var stringData = '[["2004", 1000 , 400], ["2005", 1170, 460], ["2006", 660, 1120], ["2007",1030,540]]';

data.addRows(JSON.parse(stringData));
0
Arne