Javascript 混合图表散点图与chart.js

我试图在chart.js中创建一个散点图，混合了折线图和气泡图，以绘制一些数据与预测数学模型的“理想”之间的分散情况

我正在使用

比例

来分散

xax

并形成一条直线（代表“理想”）。问题是在气泡图中，气泡的数据不可能完全超出界限，在技术上是不可能的（理论上），但它们完全超出了“理想”界限

下面是我的图表示例代码：

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

还有假人数据和codepen中的操场

无论如何，这是实际结果：

这是预期的结果：

线的位置是不相关的（捕获中的图表不是用相同的数据绘制的），但我想要的是使气泡分散

---

？知道如何实现吗？

点线性显示的原因是，在

makeBubbles（）

中将每个数据点的x和y值设置为相同。这将产生线性定位的点

要得到要分散的点，只需使用不属于线性模式的点。为了说明我的意思，我修改了

makeBubbles（）

函数，使x和y值不相等。现在你得到了一个非常广泛的散射

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

这是一个例子