第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

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

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

慕碼人8056858 2022-06-05 16:17:14
我的頁面中有 3 個折線圖,它們獲取 3 個不同的數(shù)據(jù),當(dāng)頁面加載時它們都很好,但是通過滾動或單擊東西,它們都顯示了最后一個圖表的數(shù)據(jù)(所以它們看起來都一樣),這非常令人困惑我沒有對圖表進(jìn)行實驗,我不知道如何修復(fù)它。這是我的代碼            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貢獻(xiàn)1841條經(jīng)驗 獲得超3個贊

問題是您的所有圖表都使用相同array的 forlabels和相同array的 for datasets.data。每次chartAjax調(diào)用該函數(shù)時,它們的內(nèi)容都會被覆蓋。


為了使這項工作,你可以重寫你的代碼如下。提供特定圖表創(chuàng)建函數(shù)作為函數(shù)的參數(shù)chartAjax。當(dāng) ajax 調(diào)用成功時,chartAjax將調(diào)用圖表創(chuàng)建函數(shù),每個函數(shù)都有正確的數(shù)據(jù)。


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);



查看完整回答
反對 回復(fù) 2022-06-05
  • 1 回答
  • 0 關(guān)注
  • 136 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號