ChartJS 如何在Javascript中使用for循环填充数组

smtd7mpg  于 2023-03-08  发布在  Chart.js
关注(0)|答案(1)|浏览(158)

你好,我有这个代码与静态值,使图表中的图形,这是静态代码:

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循环出错了。

cwtwac6a

cwtwac6a1#

我把data改成了这个:

data = {
        labels: created_date,
        datasets: allCurrency.map(currency => ({
            label: currency,
            borderColor: generateRandomColor(),
            data: albanianLek
        }))
    };

相关问题