Question

我正在尝试动态添加列和行，因为我从用户那里获取它们。 Sofar我正在测试它：

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

 }

在Google图表中动态加载行和列

2 个答案: