如何使用Chart.js创建带贝塞尔曲线的多折线图？

以下是实现需求的完整方案，包含代码示例和关键配置说明：

1. 基础准备 #

首先在HTML中引入Chart.js并创建画布元素：

<!-- 引入Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- 图表画布 -->
<canvas id="myChart" width="800" height="400"></canvas>

2. 图表配置与初始化 #

通过JavaScript配置图表，核心要点包括启用贝塞尔曲线平滑效果、适配非连续x轴坐标点、自定义x轴范围：

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [
            // Line 1 数据集
            {
                label: 'Line 1',
                data: [
                    {x: 10, y: 10},
                    {x: 20, y: 15},
                    {x: 30, y: 10},
                    {x: 40, y: 12},
                    {x: 50, y: 10}
                ],
                borderColor: '#2196F3',
                backgroundColor: 'rgba(33, 150, 243, 0.1)',
                fill: false,
                tension: 0.4 // 启用贝塞尔曲线，值越大曲线越平滑
            },
            // Line 2 数据集
            {
                label: 'Line 2',
                data: [
                    {x: 10, y: 10},
                    {x: 17, y: 11},
                    {x: 22, y: 28},
                    {x: 35, y: 44},
                    {x: 53, y: 16}
                ],
                borderColor: '#F44336',
                backgroundColor: 'rgba(244, 67, 54, 0.1)',
                fill: false,
                tension: 0.4
            }
        ]
    },
    options: {
        scales: {
            x: {
                type: 'linear', // 线性刻度适配非连续x值
                min: 10, // 自定义x轴最小值
                max: 53, // 自定义x轴最大值
                title: {
                    display: true,
                    text: 'X轴'
                }
            },
            y: {
                beginAtZero: false,
                title: {
                    display: true,
                    text: 'Y轴'
                }
            }
        },
        plugins: {
            tooltip: {
                mode: 'index', // 鼠标悬停时显示同x位置的所有数据点
                intersect: false
            }
        }
    }
});

关键配置说明 #

• 贝塞尔曲线实现：通过dataset.tension属性控制，值范围0-1，0为直线，大于0时自动生成平滑贝塞尔曲线，示例中设为0.4兼顾平滑度和数据准确性。
• 非连续x轴适配：将x轴类型设为linear，Chart.js会自动根据数据点的x值计算刻度位置，无需手动对齐两组数据的x坐标。
• 自定义x轴范围：通过scales.x.min和scales.x.max直接指定范围，确保图表聚焦在10-53区间内。
• 共享坐标轴：默认情况下多折线图会自动共享x、y轴，无需额外配置，两组数据会基于同一坐标系展示。

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