如何在Chart.js中绘制向后弯曲的曲线？

你的问题出在Chart.js的默认配置上：默认的line图表将labels视为分类轴，不管x值的数值大小，只会按传入顺序排列，所以无法呈现x先增后减的向后弯曲效果。要实现目标曲线，需要调整数据格式和轴配置：

修改步骤 #

1. 调整数据格式：将分离的x、y数组合并为包含{x, y}坐标的对象数组，让Chart.js识别每个点的真实坐标。
2. 配置线性数值x轴：将x轴设置为linear类型，使其按数值大小渲染刻度，而非分类顺序。

修改后的前端代码 #

<div>
    <meta id="x" data-x="{{ x }}">
    <meta id="y" data-y="{{ y }}">
    <canvas id="chart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
<script>
const canvas = document.getElementById('chart');
const x = JSON.parse(document.getElementById('x').getAttribute('data-x'));
const y = JSON.parse(document.getElementById('y').getAttribute('data-y'));

// 合并为坐标对象数组
const dataPoints = x.map((val, idx) => ({ x: val, y: y[idx] }));

new Chart(canvas, {
    type: 'line',
    data: {
        datasets: [{
            label: 'Backwards-Bending Line',
            data: dataPoints,
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            x: {
                type: 'linear', // 设置x轴为线性数值轴
                position: 'bottom'
            }
        }
    }
})
</script>

说明 #

• 后端生成的x、y数据无需修改，因为已经正确对应公式x=-(y-1)**2+1的计算结果（y从0到2时，x先增到1，再减回0）。
• 使用{x, y}对象数组传递数据后，Chart.js会按数组顺序连接每个点，结合线性x轴的数值排序，就能呈现出向后弯曲的目标曲线。

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