Диаграмма Js - групповые (средние) значения оси y относительно одной оси x на линейной / точечной диаграмме

Question

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

Я использую этот код для создания диаграммы (сгенерированной с использованием диаграммы выше)

 var config = {
      type: 'scatter',
      data: {
        //labels: this.HoursStrings,
        datasets: [{
          data: yserires, // example data [{x:2019/01/02,y:12},{x:2019/01/02,y:12}}]                                
          fill: true,
          borderColor: "#3e82f7",
          yAxesGroup: "1"
        }]
      },
      options: {
         responsive: true,
        title: {
          display: false,
        },
        legend: {
          display: false
        },
        showLines: true, 
        tooltips: {
          mode: 'index',
          intersect: true,
          callbacks: {
            label: function (tooltipItem, data) {
              var value = data.datasets[0].data[tooltipItem.index];
              var day = moment(new Date(value.x)).format(self.timeformat);
              var point = value.y + " " + self.unityType
              return point;
            }
          } //
        },
        hover: {
          mode: 'nearest',
          intersect: true
        },
        scales: {
          xAxes: [{
            display: true,
            type: 'time',
            time: {
              unit: self.timeUnit
            },
            ticks: {
              beginAtZero: true
            }
          }],
          yAxes: [{
            display: true,
            ticks: {
              beginAtZero: true,
              userCallback: function (value, index, values) {
                return self.roundValues(value) + " " + self.unityType
              }
            }
          }]
        },
        elements: {
          line: {
              tension: .1, // bezier curves
          }
       }
      }
    };

    setTimeout(() => {
      var ctx = document.getElementById("canvas");
      this.chart = new Chart(ctx, config);
      this.chart.update()
    }, 50)

Ожидаемый результат

как можно сгруппировать различные значения по оси Y по одним и тем же значениям по оси X ( должно быть одним единственным значением, таким как среднее значение по y-ось ) есть ли какие-либо встроенные функции, доступные на диаграмме js , или мне нужно сгруппировать эти значения перед привязкой диаграммы.

Примечание: Дата должна быть сгруппирована (усреднена) по дням / часам / неделям / месяцам , как показано на рисунке ниже

Answer 1

Я не знаком с диаграммой js, но из моего опыта с D3 и визуализацией временных рядов в целом, вы видите ожидаемое поведение.Т.е. визуализация временных рядов строится в виде непрерывной линии, пересекающей все точки данных, в том порядке, в котором указаны точки данных.

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

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

Я написал небольшой фрагмент кода, который группирует массив записей, вычисляя среднее значениеповторяющиеся значения x:

const dataGrouper = {}

data.forEach((dataPoint) => {
    if (!dataGrouper[dataPoint.x]) {dataGrouper[dataPoint.x] = []}
    dataGrouper[dataPoint.x].push(dataPoint)
})

const groupedData = []

Object.keys(dataGrouper).forEach((groupingKey) => {
    const sum = dataGrouper[groupingKey].reduce((accumulator, currentValue) => {
        return accumulator + currentValue.y
    }, 0)
    groupedData.push({
        x: groupingKey,
        y: sum / dataGrouper[groupingKey].length
    })
})

Answer 2

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

// Your data array
let array = [{ x: '2019/01/02', y: 12 }, { x: '2019/01/02', y: 13 }]
// The output data for Chart js
var output = [];
// Get the non-unique values and add them to an array
array.forEach(function (item) {
    var existing = output.filter(function (v, i) {
        return v.x == item.x;
    });

    if (existing.length) {
        var existingIndex = output.indexOf(existing[0]);
        if (!Array.isArray(output[existingIndex].y))
            output[existingIndex].y = [output[existingIndex].y]
        output[existingIndex].y = output[existingIndex].y.concat(item.y);
    } else {
        if (typeof item.value == 'string')
            item.value = [item.value];
        output.push(item);
    }
});

// Compute the mean
console.dir(output.map(val => {
    val.y = (val.y).reduce((a, b) => a + b, 0) / (val.y).length
    return val
}));