图表JS - 组（平均值）针对线同一X轴Y轴的值/散点图

Question

我有具有x的数据集，y值x表示日期y表示values.and我已成功生成的图表。看看下面附PIC

我使用这个代码来生成图表（使用上述图表生成）

 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)

预期结果

如何针对相同的x轴的值组不同的y轴的值（应该是这样的平均y轴中的一个单一的值）有在图JS可用的功能的任何构建或我的图表结合之前需要基团的那些值。

注：该日期应进行分组（平均）由天/小时/周/月，如图片下方

Answer 1

你可以进行预处理将其送入图形之前，你的阵列充分利用数据的平均值：

// 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
}));

Answer 2

我不熟悉的图表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
    })
})