如何將行/列動態添加到Google Column圖表

我想使用Google Visualization API創建列圖表，我可以發送數據以數組形式填充圖表的DataTable。但我需要生成具有不同數量的列/行的圖表，具體取決於我的數組包含的內容，而且我不知道如何正確地迭代它們並將它們添加到DataTable中。如何將行/列動態添加到Google Column圖表

下面是用於解析靜態數據以生成圖表的例子：（這一切都是在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循環或雙for循環迭代，我送的ArrayList和動態添加行的內容。

爲了更精確突然想到在一種情況下說我將具有上述寫入的數據，並且在其他情況下，我將不得不此：

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

，所以我將通過在參數解析這些數據函數讓我們說（我不知道這是否是正確的ideea）包含每一行的許多數組列表：Row1 = ['2004'，1000，400，232] Row2 = ['2005'，1170，460，421]和...

如何使用for循環或double for循環來迭代我發送到的動態生成數據表的arraylist e（包含可變數量的行和列）包含數據？

來源

2012-09-13 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);   

     }

來源

2012-09-14 00:26:58

感謝您的回答。有沒有一種方法可以生成圖表，其中某些行的某些列將包含0，並且不會顯示圖表中該列的所有列？ –

沒有probs。這確實是可能的。請參閱這裏的DataTable.setCell方法：https://developers.google.com/chart/interactive/docs/reference#DataTable –

對我來說，關鍵是意識到'addRow'是一個不同於'addRows'的函數 – khaverim

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 
          } 
         } 
        }

來源

2015-11-20 10:27:43

考慮提供一個解釋你的代碼 – arghtype

你可以把數據放在一個字符串，並使用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));

來源

2017-06-02 08:08:33 Arne

如何將行/列動態添加到Google Column圖表

回答

相關問題