錯誤日期類型（谷歌可視化）

Question

這是我用來顯示圖表代碼

$scope.course_chart = function(response){ 
     var data2 = new google.visualization.DataTable(); 
     data2.addColumn('date', 'pv_date'); 
     data2.addColumn('string', 'pageviews'); 

     _.each(response.result.rows, function(item){ 

      var formattedDate = item[0].slice(0, 4) + ", " + item[0].slice(4, 6) + ", " + item[0].slice(6, 8); 

      var date_format = new Date(formattedDate); 
      date_format = $filter('date')(date_format); 

      data2.addRow([ 
       date_format, 
       item[1] 
      ]); 

     }); 

     var chart = new google.visualization.AreaChart(document.querySelector('#course_chart')); 
     chart.draw(data2, options2); 

}; 

google.load('visualization', '1', {packages:['corechart'], callback: $scope.course_chart}); 

我DATE_FORMAT值2016年9月27日

什麼是要求輸出這種數據類型「的日期「在谷歌可視化？

Answer 1

，如果你有數據類型列：'date'
那麼你必須通過一個日期對象 - >new Date()

你可以使用任何的JavaScript的date contructors

如...

new Date(2016, 8, 26)
記得在javascript中，月份爲零（8 = 9月）

或...

new Date('09/26/2016')
這從一個字符串創建日期和確實顯示

添加行到數據表時，不設置格式...

data2.addColumn('date', 'pv_date'); 
data2.addRow(new Date(2016, 8, 26)); 

如果已經格式化日期，則可以在添加行時使用對象表示法
（v =值，f =格式化值）...

data2.addRow({ 
    v: new Date(2016, 8, 26) 
    f: 'Sep 26, 2016' 
}); 

你也可以使用谷歌提供

data2.addRow(new Date(2016, 8, 26)); 

var formatDate = new google.visualization.DateFormat({ 
    pattern: 'MMM d, yyyy' 
}); 
formatDate.format(data2, 0); 

終於DateFormat，就可以提供原始的日期，讓該軸格式中的日期
即hAxis.format: 'MMM d, yyyy' ...

這裏是使用每個場景的幾個示例...

1.使用hAxis.format

google.charts.load('current', { 
 
    callback: function() { 
 
    var data2 = new google.visualization.DataTable(); 
 
    data2.addColumn('date', 'pv_date'); 
 
    data2.addColumn('number', 'pageviews'); 
 

 
    data2.addRows([ 
 
     [new Date(2016, 8, 26), 100], 
 
     [new Date(2016, 8, 27), 101] 
 
    ]); 
 

 
    var options = { 
 
     hAxis: { 
 
     format: 'MMM d, yyyy' 
 
     } 
 
    }; 
 

 
    var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
 
    chart.draw(data2, options); 
 
    }, 
 
    packages:['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

2.使用DateFormat

google.charts.load('current', { 
 
    callback: function() { 
 
    var data2 = new google.visualization.DataTable(); 
 
    data2.addColumn('date', 'pv_date'); 
 
    data2.addColumn('number', 'pageviews'); 
 

 
    data2.addRows([ 
 
     [new Date(2016, 8, 26), 100], 
 
     [new Date(2016, 8, 27), 101] 
 
    ]); 
 

 
    var formatDate = new google.visualization.DateFormat({ 
 
     pattern: 'MMM d, yyyy' 
 
    }); 
 
    formatDate.format(data2, 0); 
 

 
    var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
 
    chart.draw(data2); 
 
    }, 
 
    packages:['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

3。使用對象符號{v: , f:}

google.charts.load('current', { 
 
    callback: function() { 
 
    var data2 = new google.visualization.DataTable(); 
 
    data2.addColumn('date', 'pv_date'); 
 
    data2.addColumn('number', 'pageviews'); 
 

 
    data2.addRows([ 
 
     [{v: new Date(2016, 8, 26), f: 'Sep 26, 2016'}, 100], 
 
     [{v: new Date(2016, 8, 27), f: 'Sep 27, 2016'}, 101] 
 
    ]); 
 

 
    var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
 
    chart.draw(data2); 
 
    }, 
 
    packages:['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

也爲AreaChart，後先列應類型：'number' - 不'string'