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")

运行此代码时，它将记录：

在附加侦听器之前

附加监听器后

获得数据

这可能不是您期望输出的顺序。但这完全解释了为什么图表未显示任何数据：到您调用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中？

1 个答案: