javascript - 阶梯区域谷歌图表错误的可视化

Question

我在项目中使用 Google 图表 Stepped Area，我有 2 个数据列(日期时间、状态)。

问题是当时间变化是动态的而不是固定的时，图表会像这样异常example ，然而，当数据点处于固定时间变化时，图表绘制正确，例如在这个 code每 100 毫秒一个点。

例1数据

      ['Date',  'State'],
      [new Date(1534078983500), 3],
      [new Date(1534078983880), 1],
      [new Date(1534080441460), 3],
      [new Date(1534080441840), 1],
      [new Date(1534080533960), 3],
      [new Date(1534080534330), 1]

示例2数据

      ['Date',  'State'],
      [new Date(1534078983100), 3],
      [new Date(1534078983200), 1],
      [new Date(1534078983300), 3],
      [new Date(1534078983400), 1],
      [new Date(1534078983500), 3],
      [new Date(1534078983600), 1]

Answer 1

根据Data Format对于 SteppedAreaChart，

x 轴的数据类型应该是 --> 'string'

虽然它可能适用于日期，但结果可能不一致

相反，使用 DateFormat class将日期转换为时间戳字符串

请参阅以下工作片段...

在这里，一个DataView用于为时间戳创建计算列...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Date',  'State'],
    [new Date(1534078983500), 3],
    [new Date(1534078983880), 1],
    [new Date(1534080441460), 3],
    [new Date(1534080441840), 1],
    [new Date(1534080533960), 3],
    [new Date(1534080534330), 1]
  ]);

  var formatTime = new google.visualization.DateFormat({
    pattern: 'HH:ss.SSSS a'
  });

  var view = new google.visualization.DataView(data);
  view.setColumns([{
    calc: function (dt, row) {
      return formatTime.formatValue(dt.getValue(row, 0));
    },
    label: data.getColumnLabel(0),
    type: 'string'
  }, 1]);

  var options = {
    title: 'The decline of \'The 39 Steps\'',
    vAxis: {
      title: 'Accumulated Rating',
      ticks: [{ v: 0, f: '' }, { v: 1, f: 'Close' }, { v: 2, f: 'CLG/OPG' }, { v: 3, f: 'Open' }, { v: 4, f: '' }]
    }
  };

  var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
  chart.draw(view, options);
});

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

---

编辑

如果您需要使用explorer选项，
你可以使用数字而不是字符串

使用格式化值显示实际日期，
并使用相同的方法为 x 轴构建自定义刻度...

请参阅以下工作片段...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Date',  'State'],
    [new Date(1534078983500), 3],
    [new Date(1534078983880), 1],
    [new Date(1534080441460), 3],
    [new Date(1534080441840), 1],
    [new Date(1534080533960), 3],
    [new Date(1534080534330), 1]
  ]);

  var formatTime = new google.visualization.DateFormat({
    pattern: 'HH:ss.SSSS a'
  });

  var view = new google.visualization.DataView(data);
  view.setColumns([{
    calc: function (dt, row) {
      return {
        v: row,
        f: formatTime.formatValue(dt.getValue(row, 0))
      };
    },
    label: data.getColumnLabel(0),
    type: 'number'
  }, 1]);

  var xTicks = [];
  for (var i = 0; i < view.getNumberOfRows(); i++) {
    addTick(i);
  }
  function addTick(i) {
    xTicks.push({
      v: view.getValue(i, 0),
      f: view.getFormattedValue(i, 0)
    });
  }

  var options = {
    explorer: {},
    hAxis: {
      ticks: xTicks
    },
    title: 'The decline of \'The 39 Steps\'',
    vAxis: {
      title: 'Accumulated Rating',
      ticks: [{ v: 0, f: '' }, { v: 1, f: 'Close' }, { v: 2, f: 'CLG/OPG' }, { v: 3, f: 'Open' }, { v: 4, f: '' }]
    }
  };

  var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
  chart.draw(view, options);
});

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