亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

為什么我的多個 chart.js 不能正常工作?

為什么我的多個 chart.js 不能正常工作?

慕碼人8056858 2022-06-05 16:17:14
我的頁面中有 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                            }                });            }
查看完整描述

1 回答

?
偶然的你

TA貢獻1841條經驗 獲得超3個贊

問題是您的所有圖表都使用相同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);



查看完整回答
反對 回復 2022-06-05
  • 1 回答
  • 0 關注
  • 135 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號