Question

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

问题是，当时间变化是动态的并且没有固定时，图表会像example那样变得异常，但是，当数据点处于固定时间变化时，例如，在此{{ 3}}分是每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

根据SteppedAreaChart的{{3}}

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

尽管它可能适用于日期，但结果可能不一致

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

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

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

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>

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

1 个答案: