使用 chart.js 的混合图表散点图答案

【问题标题】：Mixed chart scatter plot with chart.js使用 chart.js 的混合图表散点图
【发布时间】：2017-08-08 02:10:25
【问题描述】：

我正在尝试在 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 中的虚拟数据和操场。

不管怎样，这是实际的结果：

这是预期的结果：

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

¿知道如何实现它吗？

【问题讨论】：

标签： javascript charts chart.js

【解决方案1】：

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

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

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

这是example。

【讨论】：