javascript - 如何将 Firestore 数据推送到 ChartJS？

Question

我在将数据从 Firestore 数据绘制到 ChartJS 时遇到问题。出于某种原因，它仅在图表底部显示单个值，并在 y 轴上显示随机数而不是日期。我希望有一个人可以帮助我。我的火库：火库 我的图表：图表

这是我到目前为止所拥有的。

    db.collection('Items').get().then((snapshot) => {
    snapshot.docs.forEach(doc => {
        var item= doc.data();

        var price= item.price;
        var date = item.date;

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [date],
        datasets: [{
            label: 'Items',
            data: [price],  
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
        // Container for pan options
        pan: {
            // Boolean to enable panning
            enabled: true,

            // Panning directions. 
            mode: 'x',

            speed: 1
        },

        // Container for zoom options
        zoom: {
            // enable zooming
            enabled: true,                      
            // Zooming directions. 
            mode: 'x',
            }
        }
    });
  })
})

标签： javascripthtmlfirebasegoogle-cloud-firestorechart.js

Answer 1

对于您正在做doc的每一件事，每次都创建一个新图表。snapshotvar myChart = new Chart()

您应该在 中构建您的data和labels数组，forEach然后（在该之外forEach）创建一个新图表并将其传递给数组。

类似于以下内容（未测试）：

var labelsArray = [];
var dataArray = [];

db.collection('Items').get().then((snapshot) => {
    snapshot.docs.forEach(doc => {
        var item = doc.data();

        var price = item.price;
        dataArray.push(price);

        var date = item.date;
        labelsArray.push(date);
    });
});

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
    labels: labelsArray,
    datasets: [{
        label: 'Items',
        data: dataArray ,  
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    },
    // Container for pan options
    pan: {
        // Boolean to enable panning
        enabled: true,

        // Panning directions. 
        mode: 'x',

        speed: 1
    },

    // Container for zoom options
    zoom: {
        // enable zooming
        enabled: true,                      
        // Zooming directions. 
        mode: 'x',
        }
    }
});