почему мой многократный график. 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/",'m');
            ctxL = document.getElementById("orderChart").getContext('2d');
            createOrderChart();

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

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

Answer 1

Проблема в том, что все ваши графики используют один и тот же array для labels, а также один и тот же array для datasets.data. Каждый раз, когда вызывается функция chartAjax, их содержимое перезаписывается.

Чтобы это работало, вы можете переписать свой код следующим образом. Предоставление заданной c функции создания диаграммы в качестве параметра функции 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);