使用來自 Firestore 實時偵聽器的數據更新圖表

Question

在我的 Vue 應用程序中，我使用 Apexcharts 來顯示一些數據。 我正在使用實時偵聽器從我的 Firestore 數據庫中獲取數據。

該圖表正在正常工作，我也在實時獲取數據。 問題是我的圖表沒有用新數據更新自己，我不確定如何處理它。

我正在通過此腳本獲取我的父組件的數據：

onMounted(async () => {
      const unsub = onSnapshot(doc(db, "testUsers", "rtBp8UHReBE2rACDBHij"), (doc) => {
        getWeight.value = doc.data();
      });
      watchEffect((onInvalidate) => {
        onInvalidate(() => unsub());
      });
    });

我通過這樣的道具將數據發送到我的子組件：

watch(
      () => props.getWeight,
      (getWeights) => {
        weight.value = [...getWeights.weightData.weight];

        let numeric = { day: "numeric", month: "numeric" };

        getWeights.weightData.date.forEach((dates) => {
          date.value.push([dates.toDate().toLocaleDateString("se-SW", numeric)]);
        }),
      }
    );

我在子組件中的圖表如下所示：

  <apexchart class="apexchart" type="line" :options="options" :series="series">
  </apexchart>

<script>
export default {
  props: ["weight", "date"],

  setup(props) {
    return {
      options: {

        xaxis: {
          type: "category",
          categories: props.date,

          axisBorder: {
            show: false,
          },
        },
      },
      series: [
        {
          name: "Værdi",
          data: props.weight,
        },
      ],
    };
  },
};
</script>

如何使用來自實時偵聽器的新數據更新圖表？

Answer 1

如果在圖表options中添加id ，您將能夠調用exec並更新您的圖表

例子：

import ApexCharts from "apexcharts";

ApexCharts.exec('chartId', 'updateOptions', {
  series: [
    {
      name: 'Værdi',
      data: newWeights,
    },
  ],
  xaxis: {
    categories: newDates,
  },
})