使用Chart JS无法在同一页面加载多个图表的问题求助

你的代码里有两个问题导致第二个图表无法正常显示：

• 第二个图表的data2对象中，错误地使用了labels2作为键名，Chart.js要求数据对象的标签键必须是labels，需要改为labels: labels2。
• 第二个图表复用了第一个图表创建的gradient变量，而渐变是绑定到特定canvas上下文的，不能跨图表共用，得为第二个图表单独生成渐变。
• 额外修复：原代码中渐变的rgba括号未闭合，会导致样式解析错误，需补充完整括号。

修复后的完整代码如下：

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="./assets/css/normalize.css">
    <link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
        <!-- CONTENIDO PRINCIPAL -->
        <main id="main-content">
                    <div class="general-chart">
                        <span>X€</span><br>
                        <span style="font-size: 0.9em; font-weight: 400;">in Octobre</span>
                        <canvas id="myChart"></canvas>
                    </div>
                    
                    <div class="income-chart">
                        <canvas id="myChart_second"></canvas>
                    </div>
        </main>

    <!-- CHART JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" 
    integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" 
    crossorigin="anonymous" 
    referrerpolicy="no-referrer">
    </script>
    <!-- Scripts -->
    <script src="./js/menu.js"></script>
    <!-- GRAFICO SALDO -->
    <script>
        const ctx = document.getElementById("myChart").getContext("2d");

        const labels = [
            '2012',
            '2013',
            '2014',
            '2015',
            '2016',
            '2017',
            '2018',
            '2019',
            '2020',
        ];
        //Gradient Fill - 修复括号闭合问题
        var gradient = ctx.createLinearGradient(0, 0, 0, 400);
        gradient.addColorStop(0, 'rgba(105,53,211, 1)');
        gradient.addColorStop(1, 'rgba(105,53,211, 0.2)');

        const data = {
            labels,
            datasets: [
                {
                data: [211, 326, 165, 350, 420, 370, 500, 376, 415],
                label: 'Titulo',
                fill: true,
                backgroundColor: gradient,
                borderColor: '#6935D3',
                pointBackgroundColor: '#4D1BB1',
                },
            ],
        };

        const config = {
            type: 'line',
            data: data,
            options: {
                responsive: true,
                plugins: {legend:{display: false}},
                scales: {
                    x: {
                        grid: {
                            display: false,
                            drawBorder: false
                        }
                    },
                    y: {
                        grid: {
                            display: false,
                            drawBorder: false
                        },
                        ticks: {
                            display: false
                        },
                    }
                },
            },
        };

        const myChart = new Chart(ctx, config);
    </script>

    <!-- GRAFICO INGRESOS -->
    <script>
        const ctx2 = document.getElementById("myChart_second").getContext("2d");

        const labels2 = [
            '2012',
            '2013',
            '2014',
            '2015',
            '2016',
            '2017',
            '2018',
            '2019',
            '2020',
        ];
        // 为第二个图表单独创建渐变
        var gradient2 = ctx2.createLinearGradient(0, 0, 0, 400);
        gradient2.addColorStop(0, 'rgba(105,53,211, 1)');
        gradient2.addColorStop(1, 'rgba(105,53,211, 0.2)');

        const data2 = {
            labels: labels2, // 修正键名为labels
            datasets: [
                {
                data: [211, 326, 165, 350, 420, 370, 500, 376, 415],
                label: 'Title',
                fill: true,
                backgroundColor: gradient2, // 使用新的渐变
                borderColor: '#6935D3',
                pointBackgroundColor: '#4D1BB1',
                },
            ],
        };

        const config2 = {
            type: 'line',
            data: data2,
            options: {
                responsive: true,
                plugins: {legend:{display: false}},
                scales: {
                    x: {
                        grid: {
                            display: false,
                            drawBorder: false
                        }
                    },
                    y: {
                        grid: {
                            display: false,
                            drawBorder: false
                        },
                        ticks: {
                            display: false
                        },
                    }
                },
            },
        };

        const myChart2 = new Chart(ctx2, config2);
    </script>
</body>
</html>

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