亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何將 Firestore 數據推送到 ChartJS?

如何將 Firestore 數據推送到 ChartJS?

慕的地8271018 2021-11-25 16:42:38
我在將數據從 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',            }        }    });  })})
查看完整描述

1 回答

?
料青山看我應如是

TA貢獻1772條經驗 獲得超8個贊

對于每一個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',

        }

    }

});


查看完整回答
反對 回復 2021-11-25
  • 1 回答
  • 0 關注
  • 172 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號