Cách tự động thêm hàng/cột vào Biểu đồ cột Google

Question

Tôi muốn tạo Biểu đồ cột, sử dụng API hình ảnh hóa của Google, tôi có thể gửi dữ liệu để điền DataTable của biểu đồ ở dạng mảng. Nhưng tôi cần phải tạo ra các biểu đồ với số lượng biến của cột/hàng, tùy thuộc vào những gì mảng của tôi có chứa và tôi không biết làm thế nào để chính xác iterate chúng và thêm chúng vào DataTable.

Dưới đây là một ví dụ cho việc phân tích dữ liệu tĩnh để tạo ra các biểu đồ: (tất cả điều này là trong javascript)

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

API có những phương pháp để thêm cột và hàng: - phương pháp khác nhau để đạt được cùng một dữ liệu như trên:

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] 
    ]); 

Điều tôi cần là vòng lặp for hoặc vòng lặp gấp đôi để lặp lại danh sách mảng mà tôi gửi và tự động thêm nội dung hàng.

Để được chính xác hơn ta hãy nói trong một trường hợp tôi sẽ có các dữ liệu ghi trên, và trong trường hợp khác tôi sẽ phải này:

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

vì vậy tôi sẽ phân tích những dữ liệu thông qua các thông số trong chức năng hãy nói (tôi không biết nếu điều này sẽ là ideea đúng) nhiều arraylists chứa mỗi hàng: Row1 = ['2004', 1000, 400, 232] Row2 = ['2005', 1170, 460, 421] và ....

Làm cách nào tôi có thể sử dụng vòng lặp for, hoặc vòng lặp đôi cho vòng lặp, để lặp lại danh sách mảng mà tôi đang gửi đến động tạo ra datatabl e (với số lượng hàng và cột biến) chứa dữ liệu?

Answer 1

Đây là giải pháp làm việc trong jsfiddle.

Nhìn vào chức năng sau. lặp này trên một mảng dữ liệu và cập nhật bảng xếp hạng:

// 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);   

     } 

Answer 2

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

Answer 3

Bạn có thể đặt các dữ liệu trong một chuỗi và sử dụng JSON.parse (stringData). Cột năm phải nằm trong dấu ngoặc kép

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));