График флота вверх при попытке скрыть метки второй оси

Question

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

Single data set

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

Multiple dataset

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

xaxes: [{ 
      tickColor: "#fff", 
      mode: "time", 
      timeformat: timeFormat, 
      minTickSize: tickSize, 
      font: { 
       style: "normal", 
       color: "#666666" 
      }, 
      axisLabel: xLabel, 
      axisLabelUseCanvas: true, 
      axisLabelFontSizePixels: 11, 
      axisLabelColour: "#666666", 
      axisLabelFontFamily: 'Open Sans', 
      axisLabelPadding: 20 
     }, 
     { 
      ticks: [], 
      mode: "time", 
      timeFormat: timeFormat 
     }], 

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

Я использую flot.time, flot.tooltip и flot.axislabels, если необходимо, чтобы знать. Это мой первый вопрос, так что любая обратная связь будет здорово :)

Answer 1

My example on JSFiddle.

Это все сводится к 2 основным изменениям. Назначьте сравнения графических данных на второй оси х:

var dataSet = [{ 
      data: [ 
       [1467669600000, 12], 
       [1467709200000, 14] 
      ], 
      label: 'data1', 
      xaxis: 1 
     }, { 
      data: [ 
       [1467583200000, 15], 
       [1467622800000, 13], 
       [1467662400000, 16] 
      ], 
      label: 'data2', 
      xaxis: 2 
     }]; 

Для эстетики, вы должны скрыть второй оси х, так что это не будет отражать те же часы (набор show: false)

{ 
    "show": false, 
    "mode": "time", 
    "timeformat": "%H:%M", 
    "tickSize": [2, "hour"], 
    "min": 1467583200000, 
    "max": 1467666000000, 
    "timezone": "browser" 
}