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