如何使用Chart.js融合散点图与折线图并解决轴兼容问题？

问题背景 #

• 需求：展示从数据库获取的散点数据与预设直线的组合图表，观察散点相对于直线的位置
• 现存问题：已分别实现散点图与折线图，但无法合并显示；散点图默认X轴为线性轴，折线图默认X轴为分类轴，二者不兼容，不会通过配置第二X轴解决该问题

解决方案 #

不需要配置第二X轴，只需要在同一个Chart实例中同时添加散点和折线数据集，并统一使用线性X轴即可实现合并显示。具体调整如下：

• 仅保留一个canvas容器，用于渲染组合图表
• 将折线数据与散点数据合并到同一个data对象的datasets数组中，折线数据集同样使用包含x/y坐标的对象数组，避免依赖分类轴
• 配置图表选项，明确指定X轴为线性轴

完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Combined Line and Scatter Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div style="width: 80%;">
        <canvas id="combinedChart"></canvas>
    </div>

    <script>
        // 从数据库获取散点数据
        var sqlData = <?php
            $servername = "???";
            $username = "???";
            $password = "???";
            $dbname = "???";

            // 创建数据库连接
            $conn = new mysqli($servername, $username, $password, $dbname);

            // 检查连接
            if ($conn->connect_error) {
                die("Connection failed: " . $conn->connect_error);
            }

            // 查询数据
            $sql = "SELECT x,y FROM test";
            $result = $conn->query($sql);

            // 组装散点数据数组
            $dispersioneData = array();
            if ($result->num_rows > 0) {
                while($row = $result->fetch_assoc()) {
                    $dispersioneData[] = array(
                        'x' => $row["x"],
                        'y' => $row["y"]
                    );
                }
            }

            echo json_encode($dispersioneData);

            // 关闭连接
            $conn->close();
        ?>;

        // 组合图表的数据源：包含折线和散点两个数据集
        var combinedData = {
            datasets: [
                // 折线数据集
                {
                    label: '预设直线',
                    type: 'line', // 指定该数据集为折线类型
                    data: [
                        {x: 0, y: 0},
                        {x: 5, y: 10}
                    ],
                    fill: false,
                    borderColor: 'rgb(75, 192, 192)',
                    lineTension: 0.1,
                    pointRadius: 0 // 隐藏折线的端点，仅显示直线
                },
                // 散点数据集
                {
                    label: '数据库散点数据',
                    type: 'scatter', // 指定该数据集为散点类型
                    data: sqlData,
                    backgroundColor: 'rgba(255, 99, 132, 0.5)'
                }
            ]
        };

        // 组合图表配置选项：统一使用线性X轴
        var combinedOptions = {
            scales: {
                x: {
                    type: 'linear',
                    position: 'bottom',
                    title: {
                        display: true,
                        text: 'X轴'
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: 'Y轴'
                    }
                }
            }
        };

        // 创建组合图表实例
        var combinedChart = new Chart(document.getElementById('combinedChart'), {
            data: combinedData,
            options: combinedOptions
        });
    </script>
</body>
</html>

关键说明 #

• 每个数据集可以通过type属性单独指定图表类型，无需为整个Chart设置单一类型
• 折线数据集使用带x/y坐标的对象数组，确保和散点图共享同一线性X轴
• 通过pointRadius: 0可以隐藏折线的端点，让直线显示更简洁

内容的提问来源于stack exchange，提问作者Davi