ChartJS数据集值映射异常？Flask渲染折线图仅显示1个数据点

我正在使用Flask传递数据以渲染图表，为调试代码，我在JS代码中生成了两个数值数组。运行脚本后，图表仅显示1个数据点。此实现参考了Stack Overflow的相关回答。

<script>
    const yVals = [0, 1, 2, 3, 4];
    const xVals = [0, 1, 2, 3, 4];
    var cv = document.getElementById('lineChart');
    var ctx = cv.getContext('2d');
    var chart = new Chart(ctx, {
        type: 'line',
        data: {
            
            datasets: [ 
            {
                label: "Spectrum",
                data: yVals.map((v, i) => ({x:xVals[i], y:v})),
                backgroundColor: "#33cc33",
                borderColor: "#33cc33",
                fill: false,
            },
            ]
        }
    });
</script>

实际渲染结果仅显示1个数据点（附图：），但在在线JS编译器中测试该映射函数可得到正确输出（附图：），怀疑ChartJS未遍历完整数据集。

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