为什么我的多个chart.js无法正常工作？

Question

我的页面上有3个折线图，可以获取3个不同的数据，加载页面时它们都很好，但是通过滚动或单击内容，它们都显示了最后一个图表的数据（所以它们看起来都一样）这非常令人困惑，我没有试验图表，也不知道如何解决。

这是我的代码

            async function createOrderChart (){
                var myLineChart = new Chart(ctxL, {
                    type: 'line',
                    data: {
                    labels: chartLabels,
                    datasets: [{
                    label: "Orders",
                    data: chartData,
                    backgroundColor: [
                        "rgba(140, 184, 179, .2)",
                    ],
                    borderColor: [
                        "rgba(214, 255, 250)",
                    ],
                    borderWidth: 2
                    },
                    ]
                    },
                    options: {
                        responsive: true        
                    }
                });
            }

            async function createTradeChart (){
                var myLineChart1 = new Chart(ctxL1, {
                    type: 'line',
                    data: {
                    labels: chartLabels,
                    datasets: [{
                    label: "Trades",
                    data: chartData,
                    backgroundColor: [
                        "rgba(219, 255, 251, .2)",
                    ],
                    borderColor: [
                        "rgba(219, 255, 251)",
                    ],
                    borderWidth: 2
                    },
                    ]
                    },
                    options: {
                        responsive: true        
                    }
                });
            }

            async function createUserChart (){
                var myLineChart2 = new Chart(ctxL2, {
                    type: 'line',
                    data: {
                    labels: chartLabels,
                    datasets: [{
                    label: "Users",
                    data: chartData,
                    backgroundColor: [
                        "rgba(224, 255, 251, .2)",
                    ],
                    borderColor: [
                        "rgba(224, 255, 251)",
                    ],
                    borderWidth: 2
                    },
                    ]
                    },
                    options: {
                        responsive: true        
                    }
                });
            }

            chartAjax("/api/v1/admin/orderCahrt",'m');
            ctxL = document.getElementById("orderChart").getContext('2d');
            createOrderChart();

            chartAjax("/api/v1/admin/tradeChart",'m');
            ctxL1 = document.getElementById("tradeChart").getContext('2d');
            createTradeChart();

            chartAjax("/api/v1/admin/userChart",'m');
            ctxL2 = document.getElementById("usersChart").getContext('2d');
            createUserChart();

Answer 1

问题是，所有图表都对labels和datasets.data使用相同的数据。

为每个图表定义不同的数组，并将chartAjax函数拆分为三个图表特定的函数，每个函数都为labels和datasets.data创建图表特定的数组。