Question

嘿，我在ApexCharts中使用javascript绘制图表，此图表从firebase获取其数据，但是每次在firebase中更改数据而不是替换或更新图表时，它都会在其下添加新图表

这是代码

function dailyTracking(){ 
var query = firebase.database().ref('Facilities').on('value', function(snapshot) {

var options = {
  chart: {
      height: 380,


      width: "100%",
      type: "bar",
      stacked: false
  },
  series: [
      {
          name: "Library",
          data: snapshotToArray(snapshot.child('Library'))
      },
      {
          name: "Canteen",
          data: [5]
      },
      {
          name: "Free Lab",
          data: [42]
      }
  ],
  xaxis: {
    labels: {
      formatter: function (value, timestamp) {
        return new Date() // The formatter function overrides format property
      }, 
    }
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();
query.off();
return snapshotToArray(snapshot);});}

Answer 1

请尽量不要在事件中包装chart.render()调用。渲染一次图表，并在调用chart.updateSeries()

来获取新数据时调用更新事件

Answer 2

我设法通过添加此行来解决

document.getElementById('chart').innerHTML = '';

呈现图表之前

每当数据更新时，Firebase Web都会重复复制顶点图

2 个答案: