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

        }

    }

});