散点图与气泡图

散点图用于展示数据点在二维坐标系中的分布，气泡图则在散点基础上增加了气泡大小维度，适合展示三维数据。使用 Chart.js 可以轻松绘制并自定义这两种图表，帮助分析变量间的关系。

散点图示例

(function() {
  const ctx = document.getElementById('scatterChart').getContext('2d');
  const scatterChart = new Chart(ctx, {
    type: 'scatter',
    data: {
      datasets: [{
        label: '样本数据',
        data: [
          { x: -10, y: 0 },
          { x: 0, y: 10 },
          { x: 10, y: 5 },
          { x: 0.5, y: 5.5 }
        ],
        backgroundColor: 'rgba(255, 99, 132, 0.7)'
      }]
    },
    options: {
      responsive: true,
      scales: {
        x: {
          type: 'linear',
          position: 'bottom',
          title: { display: true, text: 'X 轴' }
        },
        y: {
          title: { display: true, text: 'Y 轴' }
        }
      },
      plugins: {
        legend: { display: true },
        tooltip: { enabled: true }
      }
    }
  });
})();

loading

气泡图示例

(function() {
  const ctx = document.getElementById('bubbleChart').getContext('2d');
  const bubbleChart = new Chart(ctx, {
    type: 'bubble',
    data: {
      datasets: [{
        label: '样本数据',
        data: [
          { x: 20, y: 30, r: 15 },
          { x: 40, y: 10, r: 10 },
          { x: 15, y: 25, r: 8 },
          { x: 25, y: 40, r: 12 }
        ],
        backgroundColor: 'rgba(54, 162, 235, 0.7)'
      }]
    },
    options: {
      responsive: true,
      scales: {
        x: {
          title: { display: true, text: 'X 轴' }
        },
        y: {
          title: { display: true, text: 'Y 轴' }
        }
      },
      plugins: {
        legend: { display: true },
        tooltip: { enabled: true }
      }
    }
  });
})();

loading