javascript - 借助谷歌图表获取 'On' 和 'Off status' 的时间序列图

Question

我有一条生产线有两种状态“开”和“关”。我有生产线何时“开启”以及持续多长时间的数据。数据格式如下

data= [[new Date("2017-09-11T10:58:14.580+03:00"),8],
[new Date("2017-09-11T10:59:22.013+03:00"), 16],
[new Date("2017-09-11T11:13:23.344+03:00"), 18],
[new Date("2017-09-11T11:14:00.608+03:00"), 6],
[new Date("2017-09-11T11:14:18.877+03:00"), 20],
[new Date("2017-09-11T11:14:29.214+03:00"), 16]];

所以数组中的第一个元素显示生产线“开启”的时间 (Time)，第二个元素显示生产线“开启”的秒数。现在我想要一个图表，它可以显示所需秒数的“开启”状态，如下图所示。如何使用谷歌图表或任何其他图表来实现这一点。感谢任何帮助

P.S:Write now 我设法得到了一个折线图，但这不是写描述。

Answer 1

使用谷歌图表获得你需要的形状，

每个数据点需要 5 行数据

1) 从零开始一行
2) 上移到ON
3) 跨越秒数
4) 调回OFF
5) 在下一个数据点之前创建一个中断

标注x轴也会非常困难，
给出点之间的空间

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

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = [
    [new Date("2017-09-11T10:58:14.580+03:00"), 8],
    [new Date("2017-09-11T10:59:22.013+03:00"), 16],
    [new Date("2017-09-11T11:13:23.344+03:00"), 18],
    [new Date("2017-09-11T11:14:00.608+03:00"), 6],
    [new Date("2017-09-11T11:14:18.877+03:00"), 20],
    [new Date("2017-09-11T11:14:29.214+03:00"), 16]
  ];

  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('date', 'Time');
  dataTable.addColumn('number', 'On');

  var xTicks = [];
  data.forEach(function (row, index) {
    // add begin & end ticks
    xTicks.push(row[0]);
    xTicks.push(new Date(row[0].getTime() + (row[1] * 1000)));

    // add rows
    // start line at 0
    dataTable.addRow([row[0], 0]);

    // move line up to 1
    dataTable.addRow([row[0], 1]);

    // move line across for number of seconds
    dataTable.addRow([new Date(row[0].getTime() + (row[1] * 1000)), 1]);

    // bring line back down to zero
    dataTable.addRow([new Date(row[0].getTime() + (row[1] * 1000)), 0]);

    // break line
    dataTable.addRow([new Date(row[0].getTime() + (row[1] * 1000)), null]);
  });

  var chart = new google.visualization.LineChart(document.getElementById('chart1'));
  chart.draw(dataTable, {
    chartArea: {
      bottom: 60
    },
    hAxis: {
      format: 'H:s',
      slantedText: true,
      ticks: xTicks
    },
    vAxis: {
      ticks: [
        {v: 0, f: 'OFF'},
        {v: 1, f: 'ON'},
        {v: 2, f: ''}
      ]
    }
  });
}

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