错误日期类型(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});

我的日期格式值是 2016年9月27日

在Google可视化中，数据类型"date"的需求输出是什么?

Answer 1

数据类型为:'date'
那么你必须传递一个日期对象——> new Date()

你可以使用任何javascript日期构造函数

等……

new Date(2016, 8, 26)
记住，在javascript中，月份是从0开始的(8 = Sept)

还是……

new Date('09/26/2016')
这是从字符串创建日期，并且不设置显示时的格式

向数据表添加行…

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

如果已经设置了日期格式，则可以在添加行
时使用对象表示法。(v = value, f =格式化值)…

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

你也可以使用google提供的DateFormat

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'