Ошибка типа Date (визуализация Google)

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 является 27 сентября 2016

что выходное требование для этого типа данных «дата «в визуализации Google?

Answer 1

, если у вас есть столбец с типом данных: 'date'
, то вы должны передать дату объект ->new Date()

вы можете использовать любой из яваскрипта date contructors

, такие как ...

new Date(2016, 8, 26)
запомнить в javascript, месяцы основаны на нуле (8 = сентябрь)

или ...

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' 
}); 

вы также можете использовать DateFormat предоставленный Google

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

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

наконец, вы можете предоставить исходные даты и пусть Формат оси даты
т.е. 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'