使用Chart JS无法创建多个图表的技术求助

问题场景 #

结合PHP与JavaScript使用Chart.js生成折线图，已通过控制台确认PHP传递的所有数据均正常，但页面始终仅能显示一个图表，另一个无法渲染。

相关代码 #

<div <?= (!isset($datesForChart) && !isset($ratesForChartCurrency1))? 'class ="not-visible"' : '' ?>>
    <canvas id="chartCurrency1"></canvas>
</div>
<div <?= (!isset($datesForChart) && !isset($ratesForChartCurrency2))? 'class ="not-visible"' : '' ?>>
    <canvas id="chartCurrency2"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    //setup
    const data = {
        labels: <?=  json_encode($datesForChart) ?>,
        datasets: [{
            label: <?= json_encode($viewData['selectedCurrency1']) ?>,
            data: <?= json_encode($ratesForChartCurrency1) ?>,
            borderWidth: 1
        }]
    };

    // config
    const config = {
        type: 'line',
        data,
        options: {
            scales: {
                y: {
                    beginAtZero: false
                }
            }
        }
    };
    

    const data2 = {
        labels: <?= json_encode($viewData['selectedCurrency2']) ?> ,
        datasets: [{
            label: <?= json_encode($viewData['selectedCurrency2']) ?>,
            data: <?= json_encode($ratesForChartCurrency2) ?>,
            borderWidth: 1
        }]
    };
    const config2 = {
        type: 'line',
        data2,
        options: {
            scales: {
                y: {
                    beginAtZero: false
                }
            }
        }
    };

    const chart1 = new Chart(document.getElementById('chartCurrency1'), config );
    const chart2 = new Chart(document.getElementById('chartCurrency2'), config2 );
</script>

控制台日志 #

DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND

DevTools failed to load source map: Could not load content for https://cdn.jsdelivr.net/npm/chart.umd.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

错误原因与修复 #

存在两处关键错误：

1. 第二个图表的labels赋值错误：data2的labels被错误赋值为货币名称（$viewData['selectedCurrency2']），应该和第一个图表一致使用日期数组$datesForChart。
2. 第二个图表的配置属性名错误：config2中使用了data2作为属性名，而Chart.js的配置规范要求该属性必须名为data。

修复后的核心代码片段：

// 修正后的data2配置
const data2 = {
    labels: <?= json_encode($datesForChart) ?> , // 改为日期数组
    datasets: [{
        label: <?= json_encode($viewData['selectedCurrency2']) ?>,
        data: <?= json_encode($ratesForChartCurrency2) ?>,
        borderWidth: 1
    }]
};
// 修正后的config2配置
const config2 = {
    type: 'line',
    data: data2, // 修正属性名为data
    options: {
        scales: {
            y: {
                beginAtZero: false
            }
        }
    }
};

另外，控制台中的日志为源地图加载失败提示，属于非功能性错误，不会影响图表的正常渲染，可忽略。

内容的提问来源于stack exchange，提问作者Sandor Kalmár