使用来自 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,
  },
})