javascript - 如何将另一个数据系列添加到 Google 图表

标签 javascript charts google-visualization

我按照此页面上的示例设置了一个简单的 Google 图表: 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);
      }

但是现在,在渲染之后,我想使用一些 javascript 动态添加另一系列数据。任何人都可以为我指明正确的方向吗?
我要添加的数据,一个包含员 worker 数的数字列,应该在图表中以另一种颜色显示一条新线,并且不是从 2004 年开始而是从 2005 年开始,

最佳答案

您需要将新数据添加到“data”变量并再次调用 chart.draw() 方法。 请参阅 DataTable 文档或在 http://code.google.com/apis/ajax/playground/?type=visualization#line_chart 上玩一下

例子:

  // 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));

关于javascript - 如何将另一个数据系列添加到 Google 图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8648255/

相关文章:

javascript - 这个 JavaScript 符号有什么作用 : Object[key](value)

javascript - NextJs - next.config.js - CSS 加载器 + 自定义 Webpack 配置

excel - VBA:修改图表数据范围

wpf - 无法加载程序集,来自 HRESULT : 0x80131040 的异常

javascript - 如何关闭 React Bootstrap Carousel 的自动播放?

javascript - 如果为空就不显示,用Javascript或者jQuery怎么办

javascript - ChartJS 2.0 - 饼图上的 Huddle 标签

google-visualization - 谷歌图表 - "Missing Query for request id: 0"

javascript - 谷歌图表工具摆脱了水平间距

google-visualization - 通过 Keen 生成的 Google 柱状图的格式工具提示内容