Firebase web продолжает дублировать apexchart при каждом обновлении данных

#javascript #firebase

Вопрос:

Привет всем, я использую javascript с ApexCharts для рисования диаграммы, и эта диаграмма получает свои данные из 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);});}

1. Когда вы выполняете рендеринг в одном и том же событии, вы должны сначала вызвать chart.destroy() if диаграмма существует, чтобы предотвратить дублирование.

2. спасибо, проблема решается путем очистки контейнера диаграммы перед рендерингом с использованием innerHTML

Ответ №1:

Мне удалось решить эту проблему, добавив эту строку

 document.getElementById('chart').innerHTML = '';
  
перед отображением диаграммы

1. chart.destroy() Функция также будет делать то же самое, предотвращая любую возможность утечки памяти. Я бы рекомендовал использовать chart.destroy(), проверив if(!chart) chart.destroy() , чтобы быть в безопасности 🙂

Ответ №2:

Старайтесь не переносить chart.render() вызов в событие. Визуализируйте диаграмму один раз и вызывайте событие обновления при получении новых данных, вызывая chart.updateSeries()