Блог

Главная - Вопросы по программированию - Тип даты ошибки (визуализация Google)

Тип даты ошибки (визуализация Google)

#javascript #google-visualization

#javascript #google-визуализация

Вопрос:

Это мой код для отображения диаграммы

 $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?

Комментарии:

1. Я ничего не знаю об этой библиотеке, но я ожидаю, что вы могли бы указать даты в виде дат (не текста). В JavaScript это означает Date объекты.

Ответ №1:

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

вы можете использовать любой из конструкторов даты javascript

например…

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' — not 'string'