Объединение связанных временных рядов данных

#javascript #data-structures #highcharts

#javascript #структуры данных #графики

Вопрос:

Учитывая, что у меня есть два массива объектов, которые имеют следующую структуру:

   {
      avg: 195.6
      max: 195.6
      min: 195.6
      time: 1552448311000
    }
  

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

Как я могу объединить эти два массива, чтобы учитывались только те точки, в которых есть совпадающая временная метка (пара)? Идея в том, что я мог бы сделать что-то подобное в конце с одним объединенным массивом:

 mergedArray.map(x => [x.load, x.avg])
  

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

Пример данных:

 const temperatureData = [
  {
    avg: 195.6,
    max: 195.6,
    min: 195.6,
    time: '1.1.2019'
  },
  {
    avg: 300,
    max: 300,
    min: 300,
    time: '1.2.2019'
  }
]

const loadData = [
  {
    avg: 195.6,
    max: 195.6,
    min: 195.6,
    time: '1.1.2019'
  }
]

const expected = [{
  avg: 195.6,
  max: 195.6,
  min: 195.6,
  time: '1.1.2019',
  load: 195.6
}]
  

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

Один симпатичный (?) Способ сделать это был бы ниже, какие-либо отзывы?

     // First filter the load by set load filter
    const filteredLoad = load.filter(x => x.avg >= this.props.filter);

    // Collect the timestamps of the filtered load
    const loadTimeStamps = filteredLoad.map(x => x.time);

    const filteredTemperatures = temperaturData.filter(x => loadTimeStamps.includes(x.time))
    .map ((c, i) => {

      if (!filteredLoad[i]) return null;

      return {
        ...c,
        load: filteredLoad[i].avg
      }
    })
  

Комментарии:

1. Можете ли вы сказать, ожидаемый ввод и вывод?

2. @Hongarc Я добавил простой пример

3. Немного не по теме вашего вопроса, но чего вы пытаетесь достичь в highcharts, что-то вроде этого: highcharts.com/demo/synchronized-charts ? Или вы пытаетесь сделать так, чтобы во всплывающей подсказке была вся соответствующая информация. Я думаю, что было бы проще (и менее ресурсоемко) играть с сюжетом вместо слияния такого рода данных раньше. Я, конечно, могу ошибаться.

4. @ewolden да, это тоже одна из возможностей. Спасибо за предложение.

Ответ №1:

Вы можете использовать циклы для фильтрации и объединения данных:

 var newData = [];

for (var i = 0; i < temperatureData.length; i  ) {
    for (var j = 0; j < loadData.length; j  ) {
        if (temperatureData[i].time === loadData[j].time) {
            newData.push(temperatureData[i]);
            newData[newData.length - 1].load = loadData[j].avg
            j = loadData.length;
        }
    }
}
  

Живая демонстрация: http://jsfiddle.net/BlackLabel/9xsdqwct /