为什么我的多个 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        

                    }

                });

            }

Answer 1

问题是您的所有图表都使用相同array的 forlabels和相同array的 for datasets.data。每次chartAjax调用该函数时，它们的内容都会被覆盖。为了使这项工作，你可以重写你的代码如下。提供特定图表创建函数作为函数的参数chartAjax。当 ajax 调用成功时，chartAjax将调用图表创建函数，每个函数都有正确的数据。async function chartAjax(url, interval, chartCreationFunction) {  $.ajax({    async: false,    url: url,    method: "GET",    dataType: "json",    data: {      'interval': interval,    },    success: function(response) {      let resChart = JSON.parse(JSON.stringify(response));       let chartLabels = resChart.data.map(o => o['date']);      let chartData = resChart.data.map(o => o['count']);      chartCreationFunction(chartLabels, chartData);    },  });}function createOrderChart(chartLabels, chartData) {  var myLineChart = new Chart(document.getElementById("orderChart"), {    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    }  });}function createTradeChart(chartLabels, chartData) {  var myLineChart1 = new Chart(document.getElementById("tradeChart"), {    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    }  });}function createUserChart(chartLabels, chartData) {  var myLineChart2 = new Chart(document.getElementById("usersChart"), {    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', createOrderChart);chartAjax("/api/v1/admin/tradeChart", 'm', createTradeChart);chartAjax("/api/v1/admin/userChart", 'm', createUserChart);