javascript - 如何从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

标签： javascripthtml

Answer 1

首先确保您的选择器具有画布 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
            }
        }]
    }
}
});