Javascript 如何在Google柱形图中动态添加行/列
我想创建一个柱状图,使用Google Visualization API,我可以发送数据以数组形式填充图表的DataTable。但是我需要生成具有可变列/行数的图表,这取决于我的数组包含的内容,我不知道如何正确地迭代它们并将它们添加到数据表中 以下是解析静态数据以生成图表的示例: (所有这些都是用javascript编写的) API具有以下用于添加列和行的方法: -获取上述相同数据的不同方法:Javascript 如何在Google柱形图中动态添加行/列,javascript,google-api,visualization,Javascript,Google Api,Visualization,我想创建一个柱状图,使用Google Visualization API,我可以发送数据以数组形式填充图表的DataTable。但是我需要生成具有可变列/行数的图表,这取决于我的数组包含的内容,我不知道如何正确地迭代它们并将它们添加到数据表中 以下是解析静态数据以生成图表的示例: (所有这些都是用javascript编写的) API具有以下用于添加列和行的方法: -获取上述相同数据的不同方法: var data = new google.visualization.DataTable(); da
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循环或double for循环来迭代我发送的ArrayList并动态添加行内容
更准确地说,在一种情况下,我会把上面的数据写下来,在另一种情况下,我会把上面的数据写下来
这:
因此,我将通过函数中的参数解析这些数据,比如说(我不知道这是否是正确的idea)包含每行的许多ArrayList:Row1=['2004',1000,400,232]
第2行=['2005',1170460421]和
如何使用for循环或double for循环来迭代我正在发送的ArrayList,以动态生成包含数据的datatable(行数和列数可变)?这里有一个可行的解决方案 请看下面的函数。这将迭代数据数组并更新图表:
// 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);
}
//用新数据更新图表的函数。
函数updateChart(){
dataTable=新的google.visualization.dataTable();
var newData=[['年度'、'销售'、'费用'、'其他'],
['2004', 1000, 400 , 232 ],
['2005', 1170, 460 , 421 ],
['2006', 660, 1120 , 4324 ],
['2007', 1030, 540 , 4234 ],
['2008', 1530, 50 , 234 ]];
//确定行数和列数。
var numRows=newData.length;
var numCols=newData[0]。长度;
//在这种情况下,第一列的类型为“string”。
dataTable.addColumn('string',newData[0][0]);
//所有其他列均为“编号”类型。
对于(变量i=1;ivar obj=JSON.parse(r.d)//Json数据将来自任何web服务或任何其他来源
var data2=新的google.visualization.DataTable();
//动态添加列的步骤
for(var j=0;j
您可以将数据放在一个字符串中,并使用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));
谢谢你的回答。是否有一种方法可以生成某些行中某些列包含0的图表,并且在该行的图表中完全不显示该列?没有问题。这确实是可能的。请参见此处的DataTable.setCell方法:我的关键是认识到addRow
是一个不同于addRows
// 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);
}
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
}
}
}
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));