Javascript 如何将行/列动态添加到 Google 柱形图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12415689/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to dynamically add rows/columns to a Google Column Chart
提问by Adrian Bob
I want to create a Column Chart , using Google Visualization API , I can send the data to populate the chart's DataTable in array form. But I need to generate the chart with variable number of columns/rows , depending on what my arrays contain and i don`t know how to correctly iterate them and add them to the DataTable.
我想创建一个 Column Chart ，使用 Google Visualization API ，我可以发送数据以数组形式填充图表的 DataTable 。但是我需要生成具有可变列/行数的图表，具体取决于我的数组包含的内容，我不知道如何正确迭代它们并将它们添加到数据表中。
Here is an example for parsing STATIC data to generate the chart : (all this is in javascript)
这是解析静态数据以生成图表的示例：（所有这些都在 javascript 中）
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
The API has these methods for adding columns and rows : - different method for obtaining the same data as above :
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]
]);
What i need is a for loop or a double for loop to iterate the arraylists that i send and dynamically add rows content.
我需要的是一个 for 循环或一个双 for 循环来迭代我发送的数组列表并动态添加行内容。
To be more precise let`s say in one case i would have the data written above , and in other case i would have this :
更准确地说，假设在一种情况下我会写上上面的数据，而在另一种情况下我会有这个：
['Year', 'Sales', 'Expenses' , 'Other'],
['2004', 1000, 400 , 232 ],
['2005', 1170, 460 , 421 ],
['2006', 660, 1120 , 4324 ],
['2007', 1030, 540 , 4234 ],
['2008', 1530, 50 , 234 ],
so i would parse these data through parameters in the function let's say ( i don't know if this would be the right ideea) many arraylists containing each row : Row1=['2004', 1000, 400 , 232 ] Row2=['2005', 1170, 460 , 421 ] and ....
所以我会通过函数中的参数解析这些数据让我们说（我不知道这是否是正确的想法）包含每一行的许多数组列表：Row1=['2004', 1000, 400, 232] Row2=[' 2005', 1170, 460, 421 ] 和 ....
How can i use a for loop , or a double for loop , to iterate the arraylists that i am sending to dynamic generate the datatable (with variable numbers of rows and column ) containing the data ?
我如何使用 for 循环或双 for 循环来迭代我发送的数组列表以动态生成包含数据的数据表（具有可变行数和列数）？
回答by Greg Ross
Here's a working solution in jsfiddle.
这是jsfiddle 中的一个有效解决方案。
Look at the following function. This iterates over an array of data and updates the chart:
看看下面的函数。这将迭代一组数据并更新图表：
// 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);
}
回答by Khurram Gulzar
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
}
}
}
回答by Arne
You can put the data in one string and use JSON.parse(stringData). The year column must be in double quotes
您可以将数据放在一个字符串中并使用 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));
