为什么图表没有出现在 HTML 中？

Question

我想把这个3维的poltly.js图和firebase连接起来，firebase的数据已经可以以数组的形式绘制到网站中了。但是图表没有出现，怎么会谢谢

firebase.database().ref('Perangkat1/hujan').on('value', function(snapshot){
    data = snapshot.val()
    for(key in data){
        x.push(data[key].total);
    }});
  firebase.database().ref('Perangkat2/hujan').on('value', function(snapshot){
    data = snapshot.val()
    for(key in data){
        y.push(data[key].total);
    }});

var x = []
var y = []
var z = [0, 0, 0, 0, 1, 1, 1, 1]
var i = [7, 0, 0, 0, 4, 4, 2, 6, 4, 0, 3, 7]
var j = [3, 4, 1, 2, 5, 6, 5, 5, 0, 1, 2, 2]
var k = [0, 7, 2, 3, 6, 7, 1, 2, 5, 5, 7, 6]
var facecolor = [
  'rgb(50, 200, 200)',
  'rgb(100, 200, 255)',
  'rgb(150, 200, 115)',
  'rgb(200, 200, 50)',
  'rgb(230, 200, 10)',
  'rgb(255, 140, 0)'
]

facecolor2 = new Array(facecolor.length * 2);

facecolor.forEach(function(x, i) {
  facecolor2[i * 2 + 1] = facecolor2[i * 2] = x;
});
var data = {
  x: x,
  y: y,
  z: z,
  i: i,
  j: j,
  k: k,
  facecolor: facecolor2,
  type: 'mesh3d'
}
console.log(data);
Plotly.newPlot('myDiv', [data])

Answer 1

由于数据必须来自服务器，所以数据是从 Firebase 异步加载的。在加载数据时，您的主要代码会继续运行，这样浏览器就不会被阻止。然后，当数据可用时，将使用该数据调用您的回调。

通过在代码中包含一些日志语句，您可以最轻松地了解这意味着什么：

console.log("Before attaching listener")
firebase.database().ref('Perangkat1/hujan').on('value', function(snapshot){
  console.log("Got data")
});
console.log("After attaching listener")

当您运行此代码时，它会记录：

Before attaching listener

After attaching listener

Got data

这可能不是您期望的输出顺序。但这完全解释了为什么您的图表没有显示任何数据：当您调用 Plotly.newPlot('myDiv', [data]) 时，数据尚未加载。

因此，所有需要数据库数据的代码都需要在 on 回调中（或从那里调用）。使用您的代码执行此操作的最简单方法是将图表的创建放在命名函数中：

function createChart(x, y) {
    var data = {
      x: x,
      y: y,
      z: z,
      i: i,
      j: j,
      k: k,
      facecolor: facecolor2,
      type: 'mesh3d'
    }
    Plotly.newPlot('myDiv', [data])
}

然后当您从 Firebase 获取数据时调用它：

firebase.database().ref('Perangkat1/hujan').on('value', function(snapshot){
  data = snapshot.val()
  for(key in data){
      x.push(data[key].total);
  }
  createChart(x, y);
});
firebase.database().ref('Perangkat2/hujan').on('value', function(snapshot){
  data = snapshot.val()
  for(key in data){
    y.push(data[key].total);
  }
  createChart(x, y);
});

为什么图表没有出现在 HTML 中？

why doesn't the graph appear in HTML?

javascript

firebase-realtime-database

plotly.js