Chart.js 散点图（Scatter Chart）

散点图（Scatter Chart）用于显示 两个变量之间的关系，适用于统计分析、机器学习和数据可视化。

1. 安装 Chart.js

如果使用 npm：

npm install chart.js

或者通过 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

2. HTML 代码

<canvas id="myScatterChart"></canvas>

3. JavaScript 代码

<script>
const ctx = document.getElementById('myScatterChart').getContext('2d');

const myChart = new Chart(ctx, {
    type: 'scatter', // 散点图类型
    data: {
        datasets: [
            {
                label: '数据集 A',
                data: [
                    { x: 10, y: 20 },
                    { x: 15, y: 10 },
                    { x: 20, y: 30 },
                    { x: 25, y: 25 },
                    { x: 30, y: 40 }
                ],
                backgroundColor: 'rgba(255, 99, 132, 0.5)', // 数据点颜色
                borderColor: 'rgba(255, 99, 132, 1)', // 边框颜色
                borderWidth: 1,
                pointRadius: 5 // 点大小
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { display: true } // 显示图例
        },
        scales: {
            x: {
                title: { display: true, text: 'X 轴数值' },
                beginAtZero: true
            },
            y: {
                title: { display: true, text: 'Y 轴数值' },
                beginAtZero: true
            }
        }
    }
});
</script>

4. 进一步优化

增加多个数据集

可以在 datasets 数组中添加多个数据集：

datasets: [
    {
        label: '数据集 A',
        data: [
            { x: 5, y: 15 }, { x: 10, y: 25 }, { x: 15, y: 20 }
        ],
        backgroundColor: 'rgba(255, 99, 132, 0.5)'
    },
    {
        label: '数据集 B',
        data: [
            { x: 10, y: 30 }, { x: 20, y: 35 }, { x: 30, y: 25 }
        ],
        backgroundColor: 'rgba(54, 162, 235, 0.5)'
    }
]

调整数据点大小

pointRadius: 6, // 普通点大小
pointHoverRadius: 8 // 悬停时点的大小

添加趋势线

如果要显示 趋势线，可以改成 折线图（line），将 fill: false 关闭填充：

{
    type: 'line',
    label: '趋势线',
    data: [ { x: 5, y: 10 }, { x: 30, y: 40 } ],
    borderColor: 'rgba(75, 192, 192, 1)',
    borderWidth: 2,
    fill: false
}

这样，你就可以使用 Chart.js 绘制散点图，并分析数据的分布趋势！🚀