如何在Google柱状图中动态添加行/列
How to dynamically add rows/columns to a Google Column Chart
我想创建一个柱形图,使用Google Visualization API,我可以发送数据以数组形式填充图表的DataTable。但我需要生成列/行数可变的图表,这取决于我的数组包含的内容,我不知道如何正确地迭代它们并将它们添加到DataTable中。
以下是解析STATIC数据以生成图表的示例:(所有这些都在javascript中)
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
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]
]);
我需要一个for循环或双for循环来迭代我发送的数组列表并动态添加行内容。
更准确地说,在一种情况下,我会把数据写在上面,而在另一种情况中,我会这个:
['Year', 'Sales', 'Expenses' , 'Other'],
['2004', 1000, 400 , 232 ],
['2005', 1170, 460 , 421 ],
['2006', 660, 1120 , 4324 ],
['2007', 1030, 540 , 4234 ],
['2008', 1530, 50 , 234 ],
所以我会通过函数中的参数来解析这些数据,比如说(我不知道这是否是正确的ideea)包含每一行的许多数组列表:Row1=["2004",1000400232]第2行=['2005',1170,460,421]和。。。。
我如何使用for循环或double for循环来迭代我要发送的数组列表,以动态生成包含数据的数据表(具有可变行数和列数)?
这里有一个jsfiddle中的工作解决方案。
查看以下函数。这会迭代一组数据并更新图表:
// 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
}
}
}
您可以将数据放在一个字符串中,并使用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));
相关文章:
- 如何在Google柱状图中动态添加行/列
- 使用jQuery动态添加表并在其中动态添加行
- 在change事件javascript上动态添加行
- 在表中动态添加行
- 在使用 javascript 动态添加行时,我正在增加索引值,但出现错误
- 动态添加行时计数器的增量
- 动态添加行时,启用/禁用Gridview中的验证程序
- 动态添加行后脚本不起作用
- 数据表可编辑插件在数据表中动态添加行后不起作用
- 如何使用angularjs动态添加行
- 使用jQuery自动完成功能动态添加行
- 错误:在带有文本框的表中动态添加行
- 引导表动态添加行Javascript
- 如何将name属性添加到<td>标记,同时动态添加行
- 如何使用添加和删除按钮动态添加表以及动态添加行
- 使用JavaScript在HTML表中动态添加行,并通过提交按钮获得每个文本框的文本框值
- 如何在动态添加行后刷新JQuery移动表
- 将css添加到html中表的动态添加行中
- 动态添加行表需要更改选择 id 标签
- 使用dojo combobox(1.8.1版本)动态添加行,作为使用jQuery(1.8)的行元素之一