如何将Firestore数据推送到ChartJS？

Question

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

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

    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',
            }
        }
    });
  })
})

Answer 1

对于doc中的每个snapshot，您正在执行var myChart = new Chart()，创建一个新的图表每次。

您应该在data中建立labels和forEach数组，然后（[outside 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',
        }
    }
});