Полоса прокрутки HIghcharts (w / showFull false) отображается после вызова setExtremes - PullRequest
0 голосов
/ 28 мая 2019

После установки крайних значений графика для dataMin и dataMax на xAxis, по-прежнему отображается полоса прокрутки xAxis, для которой настроено showFull false.

Справочная информация о том, как мы попадаем в это состояние: У нас есть диаграмма, которая обновляет данные каждые 30 секунд, вместо перерисовки мы используем атрибут chart.update с серией и перерисовываем false. это обновляет атрибуты dataMin dataMax оси, но не атрибуты min / max (которые управляют окном просмотра)

используя логику, чтобы определить, хотим ли мы прервать рабочий процесс пользователей, мы решаем, нужно ли вызывать setExtremes w / redraw true - ПРИМЕЧАНИЕ: это в основном требуется, потому что в противном случае график min может быть ниже dataMin для оси (вызывая пробел) используя floor и setExtremes, я могу частично решить эту проблему, переместив окно в вид на обновленный временной диапазон и используя floor, чтобы предотвратить их прокрутку назад (хотя это и есть подпункт, поскольку пробел явно все еще существует и его можно «увидеть»). в стиле полосы прокрутки)

ОДНАКО даже с / setExtremes dataMin dataMax полоса прокрутки по-прежнему отображается

Ожидается: график обновляется новыми актуальными данными, обновляется окно временного диапазона для графика, если в противном случае min будет меньше, чем новый dataMin, полоса прокрутки теперь должна видеть «юниверс» как newDataMin - newDataMax (! OldDataMin - newDataMax, который, кажется, имеет место)

Факт: график обновляется с использованием более свежих данных, окно времени не обновляется автоматически, время, которое больше не покрывается запросом, теперь представлено уродливым пробелом

EDIT:

void handleLiveUpdate(List agentSeries, int rangeStartTime) {
  // Needed to decide down the line if we should redraw graph
  var xAxisExtremesPreUpdate = chart["xAxis"][0].callMethod("getExtremes");

  // Updates the chart's data w/o forcing the graph to redraw itself
  // Updates the XAxis dataMin && dataMax attributes BUT NOT the min max attributes
  // (where the min/max attributes determine the window of time in view for the chart)
  chart.callMethod("update", [new js.JsObject.jsify({
    'series': agentSeries
  })]);

  // Decide if redrawing the graph would be disruptive or if it is required
  var xAxisExtremesPostUpdate = chart["xAxis"][0].callMethod("getExtremes");
  if (xAxisExtremesPreUpdate['max'] == xAxisExtremesPreUpdate['dataMax']
      && xAxisExtremesPreUpdate['min'] == xAxisExtremesPreUpdate['dataMin']) { /* Full View Case */
    // Keep entire TimeRange in view as window moves
    chart["xAxis"][0].callMethod("setExtremes", [xAxisExtremesPostUpdate['dataMin'], xAxisExtremesPostUpdate['dataMax'], true, true]);
//TODO scrollbar still visible.. why ? 
  } else { /* Partial View Case */
    // Gather data on current extremes after updating the series.data
    var min = xAxisExtremesPostUpdate['min'];
    var max = xAxisExtremesPostUpdate['max'];
    var range = max - min;
    // Determine which partial view case we are in
    // 'Left Aligned' the min value before change was the dataMin before change
    // 'Right Aligned' the max value before change was the dataMax before change
    // 'Not Aligned' the min/max values do not correlate to the dataMin/dataMax values - indicates user had scrolled to some custom portion of time range
    if (xAxisExtremesPostUpdate['min'] < xAxisExtremesPostUpdate['dataMin']) { /* Partial View - Left Aligned (Ex looking at first hour of last 8 hours) */
      min = xAxisExtremesPostUpdate['dataMin'];
      max = min + range;
      chart["xAxis"][0].callMethod("setExtremes", [min, max, true, true]);
    } else if (xAxisExtremesPostUpdate['max'] == xAxisExtremesPreUpdate['dataMax']) { /* Partial View - Right Aligned (Ex looking at most recent week of last month) */
      max = xAxisExtremesPostUpdate['dataMax'];
      chart["xAxis"][0].callMethod("setExtremes", [max - range, max, true, true]);
    } else { /* Partial View - Not Aligned (Extremes do not touch dataMin dataMax => no need to redraw as window moves s*/
      // NO-OP: no need to redraw since moving window has no impact on window in view
    }
  }

  // Always update the floor attribute, prevents long lived charts from scrolling back to a time they no longer have data in hand for
  chart["xAxis"][0].callMethod("update", [new js.JsObject.jsify({
    'floor': rangeStartTime
  }), true]);
}

РЕДАКТИРОВАТЬ 2: скриншоты для иллюстрации

Вт / Текущее решение note that scrollbar has space on left to move even though there is no data there - why is this the case?, Note 2: even when full chart in view and kept in view the scrollbar stays in view

W / Решение закомментировано without the solution after calling chart update series then the dataMin doesn't seem to be updated and therefore white space is created

JSFiddle Примечание: обновление там, кажется, обновляет xAxis, как я и ожидал.

1 Ответ

1 голос
/ 30 мая 2019

Вместо использования метода setExtremes необходимо обновить ось с помощью свойств min и max:

chart.xAxis[0].update({
    min: chart.xAxis[0].dataMin,
    max: chart.xAxis[0].dataMax
});

Демо: https://jsfiddle.net/BlackLabel/y150hupz/

Справочник по API: https://api.highcharts.com/class-reference/Highcharts.Axis#update

...