第一步的谷歌阶梯面积图错误答案

【问题标题】：Google Stepped Area Chart bug with first step第一步的谷歌阶梯面积图错误
【发布时间】：2019-12-12 15:01:01
【问题描述】：

我试图建立一个 Stepped Area 谷歌图表，但我总是遇到一个错误，第一步没有出现......

这是我的代码

function drawChart() {
      // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'formatedDate');
        data.addColumn('number', 'Slices');
        data.addRows([
          [new Date(1576022400000), 3],
          [new Date(1576026000000), 1],
          [new Date(1576029600000), 1],
          [new Date(1576033200000), 1],
          [new Date(1576036800000), 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);

这是一个错误示例：https://jsfiddle.net/hm37Lyf9/1/

有什么解决办法吗？

【问题讨论】：

标签： charts google-visualization

【解决方案1】：

根据data format的阶梯面积图，
第一列或 x 轴列应该是一个字符串。
由于正在使用日期，这很可能是问题所在。

请参阅以下工作 sn-p，
这里使用了数据视图，
它有一个计算列，可将日期转换为时间字符串。

这样，第一步就显示出来了。

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'datatat');
  data.addColumn('number', 'Slices');
  data.addRows([
    [new Date(1576022400000), 3],
    [new Date(1576026000000), 1],
    [new Date(1576029600000), 1],
    [new Date(1576033200000), 1],
    [new Date(1576036800000), 2]
  ]);

  // Create a date formatter
  var formatDate = new google.visualization.DateFormat({
    pattern: 'HH:ss a'
  });

  // Create a data view, with calculated column for time string
  var view = new google.visualization.DataView(data);
  view.setColumns([{
    calc: function (dt, row) {
      return formatDate.formatValue(dt.getValue(row, 0));
    },
    label: data.getColumnLabel(0),
    type: 'string'
  }, 1]);

  // Set chart options
  var options = {
    title: 'How Much Pizza I Ate Last Night',
    width: 400,
    height: 300
  };

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));

  // Draw chart with data view
  chart.draw(view, options);
});

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

【讨论】：

这个问题好运吗？