你好,我有这个代码与静态值,使图表中的图形,这是静态代码:
async function outlayGraph() {
const ctx = document.getElementById('outlayGraph').getContext('2d');
const data = {
labels: cashCreated_date,
datasets: [{
label: 'ALL',
borderColor: 'rgb(255, 0, 0)',
data: cashAlbanianLek
},
{
label: 'GBP',
borderColor: 'rgb(255, 0, 255)',
data: cashBritishPound
},
{
label: 'USD',
borderColor: 'rgb(0, 153, 0)',
data: cashAmericanDollar
},
{
label: 'EUR',
borderColor: 'rgb(0, 0, 255)',
data: cashEuro
},
]
};
const config = {
type: 'line',
data,
options: {
tooltips: {
mode: 'index'
}
}
};
console.log(data);
if (chart) {
chart.data.labels = cashCreated_date;
chart.data.datasets[0].data = cashAlbanianLek;
chart.data.datasets[1].data = cashBritishPound;
chart.data.datasets[2].data = cashAmericanDollar;
chart.data.datasets[3].data = cashEuro;
chart.update();
} else {
chart = new Chart(ctx, config);
}
}
现在我正在尝试将这段代码动态化,其中dataset
的值来自api的Json响应。这是我到目前为止所做的代码:
async function outlayGraph(label) {
const context = document.getElementById('outlayGraph').getContext('2d');
let data = 0;
let configuration = 0;
let allCurrency = [];
for (i in label) {
const item = label[i];
allCurrency.push(item.name);
}
data = {
labels: created_date,
datasets: [
{
label: allCurrency[i],
borderColor: generateRandomColor(),
data: albanianLek
},
]
};
console.log(data);
configuration = {
type: 'line',
data,
options: {
tooltips: {
mode: 'index'
}
}
};
if (charts) {
charts.data.labels = created_date;
charts.data.datasets[1].data = albanianLek;
charts.data.datasets[2].data = britishPound;
charts.data.datasets[3].data = americanDollar;
charts.data.datasets[4].data = euro;
charts.update();
console.log("update");
} else {
charts = new Chart(context, configuration);
console.log("create");
}
}
值来了,但有一个问题,我只得到最后一个值,我已经做了一个console.log
,看看结构如何值在两个场景中来,
静态代码值:
Object { labels: (12) […], datasets: (4) […] }
datasets: Array(4) [ {…}, {…}, {…}, … ]
0: Object { label: "ALL", borderColor: "rgb(255, 0, 0)", data: (12) […] }
1: Object { label: "GBP", borderColor: "rgb(255, 0, 255)", data: (12) […] }
2: Object { label: "USD", borderColor: "rgb(0, 153, 0)", data: (12) […] }
3: Object { label: "EUR", borderColor: "rgb(0, 0, 255)", data: (12) […] }
length: 4
动态代码值:
Object { label: "EUR", borderColor: "#BB5889", data: (15) […] }
正如您所看到的,我只得到了最后一个值,我怀疑我的for循环出错了。
1条答案
按热度按时间cwtwac6a1#
我把
data
改成了这个: