如何向Google柱形图动态添加行/列 [英] How to dynamically add rows/columns to a Google Column Chart

问题描述

我想使用Google Visualization API创建一个柱形图，我可以发送数据以数组形式填充该图的DataTable.但是我需要生成具有可变列数/行数的图表，具体取决于数组包含的内容，我不知道如何正确地对其进行迭代并将其添加到DataTable中.

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.

这里是解析STATIC数据以生成图表的示例: (所有这些都在javascript中)

Here is an example for parsing STATIC data to generate the chart : (all this is in javascript)

var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);

API具有以下用于添加列和行的方法: -获取与上述相同数据的不同方法:

The API has these methods for adding columns and rows : - different method for obtaining the same data as above :

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并动态添加行内容.

What i need is a for loop or a double for loop to iterate the arraylists that i send and dynamically add rows content.

更准确地说，在一种情况下，我将上面写有数据，而在另一种情况下，我将有 这个:

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  ],

所以我将通过函数中的参数来解析这些数据，让我们说(我不知道这是否是正确的想法)许多包含每一行的数组列表:Row1 = ['2004'，1000，400，232] Row2 = ['2005'，1170，460，421]和....

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 ....

如何使用for循环或double for循环来迭代要发送的数组列表，以动态生成包含数据的数据表(具有可变的行数和列数)?

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 ?

推荐答案

在 jsfiddle 中，这是一个可行的解决方案.

Here's a working solution in 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);        

      }

这篇关于如何向Google柱形图动态添加行/列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！