javascript - 使用 chart.js 混合图表散点图

Question

我正在尝试在 chart.js 中创建一个散点图，混合折线图和气泡图，以绘制某些数据的离散度与预测数学模型的“理想”情况。
我正在使用 scales分散 xAxes并画一条直线(代表“理想”)。问题出在气泡图中，气泡的数据不能完全越线，技术上是不可能的(理论上)，但它们正好越过“理想”线。
这是我的图表示例代码:

var chart = new Chart(ctx, {
  type: 'bubble',
  data: {
      labels: makeLabels().labels,
      datasets: [
        {
          type: 'line',
          label: 'Data',
          data: makeLabels().labels,
          fill: false,
          backgroundColor: "rgba(218,83,79, .7)",
          borderColor: "rgba(218,83,79, .7)",
          pointRadius: 0
        },
        {
          type: 'bubble',
          label: 'Data2',
          data: makeBubbles(),
          backgroundColor: "rgba(76,78,80, .7)",
          borderColor: "transparent"
        }
      ]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'linear',
        position: 'bottom',
        ticks: {
          min: 0,
          max: Math.max(...makeLabels().array)
        }
     }]
    }
  }
});

和 here is the complete code使用虚拟数据和 codepen 中的操场。
无论如何，这是实际结果:

这是预期的结果:

线的位置无关紧要(捕获中的图表未使用相同的数据绘制)，但我想要的是使气泡散开。
¿知道如何实现它吗？

Answer 1

您的点呈线性出现的原因是因为您在 makeBubbles() 中将每个数据点的 x 和 y 值设置为相同.这导致线性定位的点。

要使点散布，只需使用不属于线性模式的点。为了证明我的意思，我修改了你的 makeBubbles()函数，以便您的 x 和 y 值不相等。现在你得到了一个非常广泛的分散。

arr = arr.map(function(item, i) {
  return {x: item, y:arr[i - 1]}
});

这是一个 example .