动态添加行时Google图表数据类型不匹配

Question

。。所以我试图通过循环添加数据来创建谷歌图表；addRow（），如下所示：

   var splicedData = data.split(","); 
   //the data var is a string with several dates in this format (string): 
   // "day/month/year | hour:minutes:seconds", separated by commas.
   for(i = 0; i<splicedData.length-1; i++){
    dSplicedData = splicedData[i].split("|"); //split date and hour         
    ddSplicedData = dSplicedData[1].split(":"); // split hh, mm, ss
    dddSplicedData = dSplicedData[0].split("/"); //split dd, mm, yy
    chartData.addRow([
        [new Date ( parseInt(dddSplicedData[2]), //year
                parseInt(dddSplicedData[1]), //month
                parseInt(dddSplicedData[0]))], //day    
        [parseInt(ddSplicedData[0]), parseInt(ddSplicedData[1]), 0]
    ]);
   };

addRow（）的索引0需要"datetime/date"数据类型，索引1需要"timeofday"。据我所知，这两种类型都是通过Date（）方法映射到JS中的。总之，看看API的指示，我认为我做得对，但我得到了这个错误：

"错误：类型不匹配。值2016年7月20日星期三08:00:00 GMT+0200（CEST）与列索引0中的类型日期时间不匹配"，

这非常奇怪，因为该值与数据类型匹配，并且是由Date（）方法生成的。

此外，我尝试过谷歌的一个例子，手动插入随机日期（不循环变量值；new date（2000，8，5）），在这里引用，它也不接受。

Answer 1

检查此JsFiddle Demo

您只需要删除日期周围的[]符号。

HTML

<div id="chart_div"></div>

JS

// Load the Visualization API and the piechart package.
google.charts.load('current', {
  'packages': ['corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var chartData = new google.visualization.DataTable();
  var dSplicedData = new Array();
  var ddSplicedData = new Array();
  chartData.addColumn('datetime', 'Día');
  chartData.addColumn('timeofday', 'Hora de entrada');
  /*    
      jQuery.extend({
          getValues: function(url) {
              var result = null;
              $.ajax({
                  url: url,
                  type: 'get',
                  dataType: 'html',
                  async: false,
                  success: function(data) {
                      result = data;
                  }
              });
            return result;
          }
      });
      data = $.getValues("getData.php"); */
  data = "19/6/2016 | 11:36:18,19/6/2016 | 11:36:44,20/6/2016 | 9:3:32";


  var splicedData = data.split(",");

  for (i = 0; i < splicedData.length - 1; i++) {
    dSplicedData = splicedData[i].split("|"); //data formatted, splitted
    ddSplicedData = dSplicedData[1].split(":"); // split hour
    dddSplicedData = dSplicedData[0].split("/"); //split date
    chartData.addRow([
      new Date(parseInt(dddSplicedData[2]),
        parseInt(dddSplicedData[1]),
        parseInt(dddSplicedData[0]))
      ,
      [parseInt(ddSplicedData[0]), parseInt(ddSplicedData[1]), 0]

    ]);

  };
  var options = {
    chart: {
      title: 'foo',
      subtitle: 'bar'
    },
    width: 900,
    height: 500
  };
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  chart.draw(chartData, options);
};