[英]How to dynamically add rows/columns to a Google Column Chart
我想創建一個 Column Chart ,使用 Google Visualization API ,我可以發送數據以數組形式填充圖表的 DataTable 。 但是我需要生成具有可變列/行數的圖表,具體取決於我的數組包含的內容,我不知道如何正確迭代它們並將它們添加到數據表中。
這是解析靜態數據以生成圖表的示例:(所有這些都在 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 ],
所以我會通過函數中的參數解析這些數據讓我們說(我不知道這是否是正確的想法)包含每一行的許多數組列表:Row1=['2004', 1000, 400, 232] Row2=[' 2005', 1170, 460, 421 ] 和 ....
我如何使用 for 循環或雙 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));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.