图表 Js - 对折线/散点图中相同的 x 轴分组（平均）y 轴值

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

您可以在将数据输入图表之前对数组进行预处理，从数据中获取平均值：

// 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 和时间序列可视化的一般经验，您看到的结果是预期的行为。 IE。时间序列可视化被构建为一条与所有数据点相交的连续线，按照数据点的指定顺序。

所以要回答你关于分组的问题，我会说是的，你需要在创建图表之前自己对数据进行分组。

但是，首先，您需要考虑分组的含义——它是平均值、总和、最小值、最大值还是不同的值。我猜你会想要一个平均值，但这取决于你的用例和分析需求。

我编写了一小段代码，通过计算重复出现的 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
    })
})