Flot時系列で表示された時間を表示する

Question

私は、時間モードを使用して、タイムスタンプからフォーマットされた絶対時間をx軸に表示することができました。

今、私は最初のデータポイントからの経過時間を表示したいと思います。

例：最初のデータポイントが17:40で、2番目のデータポイントが17:45の場合、x軸の最初の点は00:00:00と表示され、2番目の目盛りは00:05:00と表示されます。

Flotで可能ですか？

Answer 1

はい、可能です。

考え方は、2つのx軸を使用することです。最初の1つ目と2つ目のx軸は、真夜中から始まり、元のx軸と同じ期間持続する時間枠の範囲です。

たとえば、最初のx軸は17:40 - 17:55であり、毎回計算する必要があるのは0:00 - ?です（現在は0:00 - 0:15ですが、flotにはタイムスタンプの値が必要です）。

これはあなたにそれを計算する方法のアイデアを与えることができます。今、私たちは私たちのxの両方の範囲を持っているので

1467906900000 - 1467906000000 = 900000 // difference between 17:55 - 17:40 (result: 15 minutes in timestamp) 

1467842400000 + 900000 = 1467843300000 // 0:00 + 15 minutes (result: 0:15 in timestamp) 

（あなたはこのtimestamp converterをチェックアウトすることができます混乱し、このタイムスタンプの事を見つけた場合）

を-axes、我々はオプションに追加することができます。

"xaxes": [{ 
    "mode": "time", 
    "timeformat": "%H:%M", 
    "tickSize": [5, "minute"], 
    "min": 1467906000000, // 17:40 
    "max": 1467906900000, // 17:55 
    "timezone": "browser" 
    }, { 
    "mode": "time", 
    "timeformat": "%H:%M", 
    "tickSize": [5, "minute"], 
    "min": 1467842400000, // 0:00 
    "max": 1467843300000, // 0:15 
    "timezone": "browser" 
    }] 

問題は、我々はそれに任意のグラフデータを割り当てない場合は、この第2のX軸は、まだ現れていないということです。幸いにも私たちのために、我々は簡単に空のデータ・セットを渡すことによって、それをだますことができます。

$.plot('.graphContainer', [ 
     { 
     // data for first x-axis 
      data: [ 
       [1467906000000, 12], // data point at 17:40 
       [1467906300000, 14], // data point at 17:45, etc... 
       [1467906600000, 16], 
       [1467906900000, 23] 
      ], 
      label: 'data1', 
      xaxis: 1 
     }, 
     // data for second a-axis (empty data set in order to force displaying second x-axis) 
     { 
      data: [], 
      xaxis: 2 
     } 
    ], 
    options); 

をJSFiddleに私の作業例を参照してください。