Google图表中的阶梯区域可视化错误

Question

Google图表中的阶梯区域可视化错误

3

我在项目中使用Google图表的阶梯区域图，有两个数据列（日期时间、状态）。

问题是当时间变化是动态和不固定的时候，图表会出现异常，就像这个示例一样。然而，当数据点在固定的时间变化时，图表会正确绘制，例如在这个代码中，点每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]

- Ahmed Ibrahim

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WhiteHat · Accepted Answer

根据数据格式，对于SteppedAreaChart，x轴的数据类型应该是--> 'string'。尽管它可能与日期一起使用，但结果可能不一致。相反，使用DateFormat类将日期转换为时间戳字符串。请参见以下工作示例...在此示例中，使用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>