如何将 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',

            }

        }

    });

  })

})

Answer 1

对于每一个doc在snapshot你正在做的var 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',        }    }});