在谷歌图表表中动态加载行和列

Question

我正在尝试在从用户那里获取列和行时动态添加它们。到目前为止，我正在测试它：

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

            seriesName[0] = 'Name';
            seriesName[1] = 'Age';

            for (var i = 0; i < seriesName.length; i++) {
                data.addColumn('string', seriesName[i]);
            }

            seriesData[0] = '1, 2, 3, 4, 5';
            for (var i = 0; i < seriesData.length; i++) {
                if (seriesData[i] != null) {
                    var sData = new Array();
                    sData = seriesData[i].split(',');
                    /*for (a in sData) {
                        sData[a] = parseInt(sData[a], 10);
                    }*/
                }
                var data = JSON.parse('[' + sData + ']');
                alert(data);
                data.addRows(data);
            }

            alert(sData);


            var table = new google.visualization.Table(document.getElementById(div.id));
            table.draw(data, { showRowNumber: true });

这很好地添加了列，但没有添加行。我尝试通过以下方式添加行，它的工作原理如下：

var rows = new Array();
rows[0] = ['1','2'];
rows[1] = ['abc', 'cdf'];
data.addRows(rows);

现在的问题是我将以逗号分隔的字符串形式获取行，例如“abc，cdf”“1,2”。我尝试使用 .split 方法将此字符串转换为它接受的字符串数组类型，但它似乎不起作用。 Kindle告诉我一种让它工作的方法。谢谢

Answer 1

问题出在这个循环中：

for (var i = 0; i < seriesData.length; i++) {
    if (seriesData[i] != null) {
        var sData = new Array();
        sData = seriesData[i].split(',');
        /*for (a in sData) {
            sData[a] = parseInt(sData[a], 10);
        }*/
    }
    var data = JSON.parse('[' + sData + ']');
    alert(data);
    data.addRows(data);
}

首先，您已经在上面声明了一个data 变量（它保存了DataTable），所以这一行：

var data = JSON.parse('[' + sData + ']');

var 被忽略，data 被覆盖。其次，在这条线上，sData 是一个数组（根据sData = seriesData[i].split(',');）。第三，由于您覆盖了data，因此当您在此行调用data 时，它不再具有addRows 方法：

data.addRows(data);

假设seriesData[i] 是'foo,bar,cad' 形式的字符串，你的循环应该是这样的：

for (var i = 0; i < seriesData.length; i++) {
    if (seriesData[i] != null) {
        var sData = seriesData[i].split(',');
        if (sData.length != data.getNumberOfColumns()) {
            // throw an error
        }
        else {
            data.addRows(sData);
        }
    }
}

Answer 2

参考这个jsfiddle，它有更新图表按钮来动态添加。下面的代码应该可以帮助您进一步进行。

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

 }