Highcharts - ошибка выбора с живыми данными и разными временными интервалами

Question

Highcharts - ошибка выбора с живыми данными и разными временными интервалами

1

Я использую highcharts, и я пытаюсь разработать диаграмму, которая может обрабатывать данные в реальном времени.

Вот моя первая попытка:

var data = [],
  chart_interval = undefined;

Highcharts.setOptions({
  global: {
    useUTC: false
  }
});

function addRandomData(dataSet, frequency, yMax, count) {
  for (var i = 1; i <= count; i++) {
    var x = new Date((new Date()).getTime() + i * frequency),
      y = Math.random() * yMax;

    dataSet.push({
      x: x,
      y: y
    });
  }

  return dataSet;
}

function addDataInterval(dataSet, frequency, yMax) {
  return setInterval(function() {
    var x = new Date(dataSet[dataSet.length - 1].x.getTime() + frequency),
      y = Math.random() * yMax;

    dataSet.push({
      x: x,
      y: y
    });
  }, frequency);
}

// Parameters: dataSet, frequency, yMax, count
addRandomData(data, 1000, 10000, 60);
//  Parameters: dataSet, frequency, yMax
addDataInterval(data, 500, 10000);

// Create the chart
Highcharts.stockChart('container', {
  chart: {
    zoomType: 'x',
    events: {
      load: function() {

        // set up the updating of the chart each second
        var series = this.series[0];
        setInterval(function() {
          series.update({
            data: data
          }, true);
        }, 1000);
      }
    }
  },

  rangeSelector: {
    buttons: [{
      count: 1,
      type: 'minute',
      text: '1M'
    }, {
      count: 5,
      type: 'minute',
      text: '5M'
    }, {
      type: 'all',
      text: 'All'
    }],
    inputEnabled: false,
    selected: 0
  },

  title: {
    text: 'Live random data'
  },

  exporting: {
    enabled: false
  },

  series: [{
    name: 'Random data',
    data: data
  }]
});

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

Проблема. Если уже существующие данные имеют разные временные интервалы, такие как вновь созданные данные, свободно выбираемый зум не работает.

Я где-то ошибаюсь или это ошибка в высоких диаграммах?

William 08 сен. 2017, в 19:07

Источник

Теги:

javascript

highcharts

1 ответ

Ещё вопросы

Sphinxxx · Accepted Answer · 2017-09-08T17-22-00.000Z

Highcharts запрашивает значения времени как временные метки в миллисекундах вместо объектов Date:

В каком формате принимается библиотека highcharts js для дат?
Highcharts X-Axis время с даты JS

Измените способ генерации ваших значений x, и масштабирование волшебным образом снова начнет работать:

var x = (new Date()).getTime() + i * frequency,

...

var x = dataSet[dataSet.length - 1].x + frequency,

https://jsfiddle.net/74zdsvbo/