Отображение прошедшего времени в временных рядах флота

Question

Мне удалось использовать временной режим и отобразить абсолютное время, отформатированное по отметкам времени, по оси x.

Теперь я хотел бы отобразить прошедшее время с момента первого дататопа.

Пример: первая дататаунта - 17:40, а вторая точка - 17:45, тогда первая точка на оси x должна отображаться 00:00:00, а вторая отметка должна отображаться 00:05:00.

Возможно ли это с помощью флота?

Answer 1

Да, это возможно.

Идея состоит в том, чтобы использовать 2 оси x: оригинальную одну и вторую оси X с диапазоном времени, начиная с полуночи и продолжая в течение того же периода, что и исходная ось x.

Так, например, первая ось х 17:40 - 17:55 и второй: 0:00 - ?, которые мы должны были бы рассчитывать каждый раз (теперь мы знаем, что это будет 0:00 - 0:15 но Flot нужно значение в метку времени).

Это может дать вам представление о том, как вычислить, что:

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" 
    }] 

проблема заключается в том, что эта вторая ось х не будет отображаться еще, если мы не будем назначать любые данные графика на него. К счастью для нас, мы можем легко обмануть его, передавая пустой набор данных:

$.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.