在谷歌圖表的幫助下獲取'開'和'關狀態'的時間序列圖

我有一個生產線有'開'和'關'兩個狀態。當生產線處於「開」狀態並持續了多長時間時，我有數據。的數據是在以下格式在谷歌圖表的幫助下獲取'開'和'關狀態'的時間序列圖

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

所以在陣列中的第一個元素表示的時間時（時間）的生產線是「開」和第二元件顯示的秒的數量這是'開'。現在我想要一個圖表，可以顯示'開'狀態所需的秒數，如下所示。谷歌圖表或其他任何方式如何實現這一目標。任何幫助表示讚賞

P.S：現在寫我設法得到一個折線圖，但這不是寫描述。

來源

2017-09-12 Usman Khan

得到你需要使用谷歌的圖表形狀，

你將需要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>

來源

2017-09-12 13:15:08 WhiteHat

是的，它可以幫助一個很多，ThankYou –

在谷歌圖表的幫助下獲取'開'和'關狀態'的時間序列圖

回答

相關問題