借助google图表获取“On”和“Off状态”的时间序列图

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]];

​

因此，数组中的第一个元素显示(时间)生产线“On”的时间，第二个元素显示“On”的秒数。现在，我想要一个图表，它可以显示所需秒数的“On”状态，如下所示。如何通过谷歌图表或任何其他方式实现这一点。任何帮助都是非常感谢的。

​

P.S:Write，现在，我设法得到了一个线条图，但这不是写的描绘。

Answer 1

为了得到你需要使用谷歌图表的形状

每个数据点需要5行数据。

1)从零开始行

2)向上移动到

3)跨过秒#

( 4)把东西放下来

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>

​