如何从firebase填充数据到chartJS html javesctipt

Question

请帮助我从 Firebase 到 Chart.js 的 fillData 我不知道方法 filldatavar ctx = document.getElementById('myChart').getContext('2d');var chart = new Chart(ctx, {    // The type of chart we want to create    type: 'line',    // The data for our dataset    data: {              labels: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],    datasets: [{      label: 'Temperature',      borderColor: 'rgb(255, 0, 0)',      data: [40, 48, 51, 45,7,8,40]  }, {      label: 'Humidity',      borderColor: 'rgb(0, 0, 255)',      data: [0, 5, 26.8, 25.4,5,8,9],      type: 'line'  }],  labels: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat']},[enter image description here][1]    options: {}});填充到 Temp，Hty 到 chartJS

Answer 1

和

 <script>

    fillData("valTemp", "Temp");

         fillData("valHumid", "Hty");

         fillData("valFlow1", "FlowRate");

         fillData("valFlow2", "FlowRate2");

          function fillData(elemID, child){

          var data = db.child(child);

          data.on('value', function(snap){

              document.getElementById(elemID).innerHTML = snap.val();

          });

          }

    </script> 

Answer 2

首先确保您的选择器具有画布 id Like

<canvas id="myChart" width="400" height="400"></canvas>

试试这个

`

var ctx = document.getElementById('myChart');

var myChart = new Chart(ctx, {

type: 'line',

data: {

    labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],

    datasets: [{

        label: 'Temperature',

        data: [40, 48, 51, 45,7,8,40],

        borderColor: [

            'rgba(255, 0, 0)',

        ],

    },{

        label: 'Humidity',

        data: [0, 5, 26.8, 25.4,5,8,9],

        borderColor: [

            'rgba(255, 0, 0)',

        ],

    }]

},

options: {

    scales: {

        yAxes: [{

            ticks: {

                beginAtZero: true

            }

        }]

    }

}

});