ChartJS 我无法使用Chart JS添加多个图表

sshcrbum 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(240)

我正在制作一个需要显示图表的网站。为此，我决定使用图表JS。
问题是，当我试图在同一页上加载多个图表时，我无法做到。
由于某种原因，它只加载了一个图表，但第二个图表没有加载。
我已经检查了变量名称和ID，我没有看到失败可能在哪里。
谢谢你，谢谢你

<!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',
        ];
        const data2 = {
            labels2,
            datasets: [
                {
                data: [211, 326, 165, 350, 420, 370, 500, 376, 415],
                label: 'Title',
                fill: true,
                backgroundColor: gradient,
                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>

chart.js

来源：https://stackoverflow.com/questions/74235898/i-cant-add-multiple-charts-with-chart-js

2条答案

按热度按时间

carvr3hs1#

由于找不到labels2，因此未显示，请在下面进行更改

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

赞(0）回复(0）举报 2022-11-06

pbpqsu0x2#

您必须使用“标签：labels2”。如果只使用变量，则变量名称将自动用作属性名称。

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

赞(0）回复(0）举报 2022-11-06

我来回答

ChartJS 我无法使用Chart JS添加多个图表

2条答案

相关问题

热门标签

最新问答