如何将另一个数据系列添加到Google图表 [英] How to add another data series to a Google chart

问题描述

我已经按照此页面上的示例设置了简单的Google图表：
http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html

  google.load（visualization，1，{packages：[corechart]}）; 
 google.setOnLoadCallback（drawChart）; 
函数drawChart（）{
 var data = new google.visualization.DataTable（）; 
 data.addColumn（'string'，'Year'）; 
 data.addColumn（'number'，'Sales'）; 
 data.addColumn（'number'，'费用'）; 
 data.addRows（[
 ['2004'，1000，400]，
 ['2005'，1170,460]，
 ['2006'，860,580] ，
 ['2007'，1030，540] 
]）; 
 
 var options = {
 width：400，height：240，
 title：'Company Performance'
}; 
 
 var chart = new google.visualization.LineChart（document.getElementById（'chart_div'））; 
 chart.draw（data，options）; 
} 
  

但是现在，在呈现之后，用一些javascript我想动态添加另一个一系列数据。任何人都可以在正确的方向上指出我如何做到这一点？

我想添加的数据，包含员工人数的数字栏应该在图表中以另一种颜色显示一个新行，并不是在2004年开始，而是在2005年， 您需要将新数据添加到'数据'变量并调用再次使用chart.draw（）方法。
查看DataTable文档或在 http：/ /code.google.com/apis/ajax/playground/?type=visualization#line_chart

示例：

  //添加列
 data.addColumn（'string'，'Employee Name'）; 
 data.addColumn（'date'，'开始日期'）; 
 
 //添加空行
 data.addRows（6）; 
 data.setCell（0，0，'Mike'）; 
 data.setCell（0，1，{v：new Date（2008,1,28），f：'February 28，2008'}）; 
 data.setCell（1，0，'Bob'）; 
 data.setCell（1，1，new Date（2007，5，1））; 
 data.setCell（2，0，'Alice'）; 
 data.setCell（2，1，new Date（2006，7，16））; 
 data.setCell（3，0，'Frank'）; 
 data.setCell（3，1，new Date（2007，11，28））; 
 data.setCell（4，0，'Floyd'）; 
 data.setCell（4，1，new Date（2005，3，13））; 
 data.setCell（5，0，'Fritz'）; 
 data.setCell（5，1，new Date（2007，9，2））; 
  

I have setup a simple Google Chart by following the example on this page: http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html

 google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        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',  860, 580],
        ['2007', 1030, 540]
        ]);

        var options = {
          width: 400, height: 240,
          title: 'Company Performance'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

But now, after it's rendered, with some javascript i want to dynamically add another series of data. Can anyone point me in the right direction on how to do this?
The data i want to add, a number column with the number of employees, should show a new line in the chart, in another color and doesn't start at year 2004 but at 2005,

解决方案

You need to add new data to 'data' variable and call the chart.draw() method again. See the DataTable docs or play a bit at http://code.google.com/apis/ajax/playground/?type=visualization#line_chart

Example:

  // Add columns
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date');

  // Add empty rows
  data.addRows(6);
  data.setCell(0, 0, 'Mike');
  data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'});
  data.setCell(1, 0, 'Bob');
  data.setCell(1, 1, new Date(2007, 5, 1));
  data.setCell(2, 0, 'Alice');
  data.setCell(2, 1, new Date(2006, 7, 16));
  data.setCell(3, 0, 'Frank');
  data.setCell(3, 1, new Date(2007, 11, 28));
  data.setCell(4, 0, 'Floyd');
  data.setCell(4, 1, new Date(2005, 3, 13));
  data.setCell(5, 0, 'Fritz');
  data.setCell(5, 1, new Date(2007, 9, 2));

这篇关于如何将另一个数据系列添加到Google图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！