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

Question

请帮助我从 Firebase 到 Chart.js 的 fillData 我不知道方法 filldata

var 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

和&nbsp;<script>&nbsp; &nbsp; fillData("valTemp", "Temp");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;fillData("valHumid", "Hty");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;fillData("valFlow1", "FlowRate");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;fillData("valFlow2", "FlowRate2");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function fillData(elemID, child){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var data = db.child(child);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data.on('value', function(snap){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(elemID).innerHTML = snap.val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </script>&nbsp;

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: {&nbsp; &nbsp; labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],&nbsp; &nbsp; datasets: [{&nbsp; &nbsp; &nbsp; &nbsp; label: 'Temperature',&nbsp; &nbsp; &nbsp; &nbsp; data: [40, 48, 51, 45,7,8,40],&nbsp; &nbsp; &nbsp; &nbsp; borderColor: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'rgba(255, 0, 0)',&nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; },{&nbsp; &nbsp; &nbsp; &nbsp; label: 'Humidity',&nbsp; &nbsp; &nbsp; &nbsp; data: [0, 5, 26.8, 25.4,5,8,9],&nbsp; &nbsp; &nbsp; &nbsp; borderColor: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'rgba(255, 0, 0)',&nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; }]},options: {&nbsp; &nbsp; scales: {&nbsp; &nbsp; &nbsp; &nbsp; yAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; beginAtZero: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; }}});