使用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包含dummie数据和codepen中的游乐场。

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

这是预期的结果：

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

¿任何想法如何实现它？

Answer 1

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

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

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

这是example。