Как отправить данные Firestore в ChartJS?

Question

У меня проблема с отображением данных в ChartJS из данных Firestore. По какой-то причине он показывает только одно значение в нижней части графика и случайное число по оси 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',
        }
    }
});