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轴的平均值 ）， strong> 内置图表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

我对Chart 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
    })
})

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

2 个答案: