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);
添加回答
舉報