无法使用 Chart JS 创建多个图表

Question

出于某种原因，只创建了一个图表，我无法找出原因。我正在尝试结合使用 PHP 和 javascript。一切都从 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

我的铬设置：

Answer 1

也许你可以这样试试

//setup
const data = {
    labels: <?=  json_encode($datesForChart) ?>,
    datasets: [{
        label: <?= json_encode($viewData['selectedCurrency1']) ?>,
        data: <?= json_encode($ratesForChartCurrency1) ?>,
        borderWidth: 1
    },
    {
        label: <?= json_encode($viewData['selectedCurrency2']) ?>,
        data: <?= json_encode($ratesForChartCurrency2) ?>,
        borderWidth: 1
    }]
};

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