时间戳

首页 > 解决方案 > 第一步的谷歌阶梯面积图错误

charts - 第一步的谷歌阶梯面积图错误

问题描述

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

这是我的代码

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/

有什么解决办法吗？

标签： chartsgoogle-visualization

解决方案

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

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

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

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>

推荐阅读