在谷歌折线图中键入不匹配错误

时间:2018-05-21 12:13:55

标签: javascript charts google-visualization

我第一次做谷歌折线图,在这里我面临一个错误,我试图纠正这个。

  

错误:类型不匹配。值1,5与列索引0中的类型编号不匹配

$.ajax({
    type: 'POST',
    dataType: 'json',
    url: '<?php echo base_url();?>index.php/seo/seo/graphData',     
    data: {website_id:website_id,keyword_id:keyword_id,fromdate:fromdate,todate:todate},
    success: function (data1) { 
    var data = new google.visualization.DataTable();
    var arr2 = [];
    //data.addColumn('number', 'A');
    data.addColumn('number', 'Dogs');
    data.addColumn('number', 'Cats');

    for(var i=0; i<data1.query.length; i++){
      var arr = [];

      for(var j=0; j<data1.query[i].date.length; j++)
      { 
       arr.push(data1.query[i].date[j].page);
      } 
      arr2.push([arr]);
      //data.addRow(arr2); 
      } console.table(arr2);
      //var stringData = '[["2004", 1000 , 400], ["2005", 1170, 460], ["2006", 660, 1120], ["2007",1030,540]]';
    data.addRows([arr2]);
    //console.log(arr2);

    var options = {
      hAxis: {
        title: 'Time'
      },
      vAxis: {
        title: 'Popularity'
      },
      series: {
        1: {curveType: 'function'}
      }
    };

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

这是我正在使用的代码,请帮助我。任何帮助都是值得的。

1 个答案:

答案 0 :(得分:0)

有几个问题

首先,"page"的值用引号括起来,使它们成为字符串,而不是数字

{"page":"13","datee":"2018-05-15 00:00:00"}

使用parseIntparseFloat转换为数字

  arr.push(parseFloat(data1.query[i].date[j].page));

接下来,有太多的数组被添加到数据表中 相反,直接在循环中使用addRow

for(var i=0; i<data1.query.length; i++) {
  var arr = [];

  for(var j=0; j<data1.query[i].date.length; j++) {
    arr.push(parseFloat(data1.query[i].date[j].page));
  }
  data.addRow(arr);
}

请参阅以下工作代码段...

&#13;
&#13;
google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data1 = {"query":[{"datee":"2018-05-14 00:00:00","date":[{"page":"1","datee":"2018-05-14 00:00:00"},{"page":"5","datee":"2018-05-14 00:00:00"}]},{"datee":"2018-05-15 00:00:00","date":[{"page":"9","datee":"2018-05-15 00:00:00"},{"page":"13","datee":"2018-05-15 00:00:00"}]}]};
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Dogs');
  data.addColumn('number', 'Cats');

  for(var i=0; i<data1.query.length; i++) {
    var arr = [];

    for(var j=0; j<data1.query[i].date.length; j++) {
      arr.push(parseFloat(data1.query[i].date[j].page));
    }
    data.addRow(arr);
  }

  var options = {
    hAxis: {
      title: 'Time'
    },
    vAxis: {
      title: 'Popularity'
    },
    series: {
      1: {curveType: 'function'}
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});
&#13;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
&#13;
&#13;
&#13;