javascript - data.addRows在Google图表中不起作用

我正在尝试使用Google API绘制折线图。

但是没有绘制图表，我可以确定data.addRows(rows);中的一些错误。因为此data.addRows行之后的警报不会弹出。

如果我在data.addRows(rows)之前给出警报，则会弹出警报。

我不知道这里出了什么问题。任何帮助深表感谢。

<script type="text/javascript">
      google.load('visualization', '1.0', {'packages':['corechart']});

      function drawLineChart() {
          var date = 0;
          var status = 0;
          var rows = new Array();
          var data = new google.visualization.DataTable();
          var $attendance_date =  new Array();
          var $attendance_status = new Array();

          $attendance_date[0] = '2004';
          $attendance_date[1] = '2005';
          $attendance_date[2] = '2006';

          $attendance_status[0] = 1;
          $attendance_status[1] = 3;
          $attendance_status[2] = 5;

          rows.push(['Year', 'Sales']);
          for(var i = 0; i < 3 ; i++) {
            date = $attendance_date[i];
            status = parseInt($attendance_status[i]);
            rows.push([date, status]);
          }

          data.addColumn('string', 'Subject');
          //  alert(rows);
          data.addRows(rows);
          alert(rows);

          var options = {
          title: 'My Chart',
          'width':900,
           'height':320,
           'backgroundColor': '#d9d9e4'
          };

          var chart = new google.visualization.LineChart(document.getElementById('chart_attendance_div'));
          chart.draw(data, options);
      }
</script>

最佳答案

您所做的工作有很多问题，让我们一一解决。

首先，使用addRow和addColumn时，您可以使用addColumn命令定义 header 。因此，您可以删除以下行:

rows.push(['Year', 'Sales']);

其次，当您确实有两列(“年份”和“销售”)时，您将单个列定义为“主题”。您应该定义两个列:

data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');

完成此操作后，可以将addRows命令与最终(工作)代码一起使用:

function drawVisualization() {
  var date = 0;
  var status = 0;
  var rows = new Array();
  var data = new google.visualization.DataTable();
  var $attendance_date =  new Array();
  var $attendance_status = new Array();

  $attendance_date[0] = '2004';
  $attendance_date[1] = '2005';
  $attendance_date[2] = '2006';

  $attendance_status[0] = 1;
  $attendance_status[1] = 3;
  $attendance_status[2] = 5;

  // This line is commented out because it should be deleted
  // rows.push(['Year', 'Sales']);
  for(var i = 0; i < 3 ; i++) {
    date = $attendance_date[i];
    status = parseInt($attendance_status[i]);
    rows.push([date, status]);
  }
  // This line is commented out because it should be deleted
  // data.addColumn('string', 'Subject');

  // These lines should be added for column headers
  data.addColumn('string', 'Year');
  data.addColumn('number', 'Sales');

  //  alert(rows);
  data.addRows(rows);
  // alert(rows);

  var options = {
    title: 'My Chart',
    'width':900,
    'height':320,
    'backgroundColor': '#d9d9e4'
  };

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

但是，如果您要走的很远，那么不妨继续下一步。现在，您正在创建一个新数组，在for循环中填充它，并将该数组传递给addRows命令。为什么不裁掉中间人呢？

      var data = new google.visualization.DataTable();
      var $attendance_date =  new Array();
      var $attendance_status = new Array();

      $attendance_date[0] = '2004';
      $attendance_date[1] = '2005';
      $attendance_date[2] = '2006';

      $attendance_status[0] = 1;
      $attendance_status[1] = 3;
      $attendance_status[2] = 5;

      data.addColumn('string', 'Year');
      data.addColumn('number', 'Sales');

      for(var i = 0; i < 3 ; i++) {
        data.addRow([$attendance_date[i], parseInt($attendance_status[i])])
      }

Presto，您的代码要简单得多，并且您将跳过一步。

关于javascript - data.addRows在Google图表中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15907173/