如何使用 vue-chartjs 5.2 从 vue3 中的父级更新图表

Question

我是 vue 新手，说实话，我不明白如何从其括号中更新图表。使用 vue-dev-tools，我看到数据已更新，但没有触发图形更新。 我发现很多关于 vue2 和旧版 vue-chartjs api 调用的过时信息 + vue-chartjs 新 api 的文档，这对我没有帮助。 vue-chartjs 说有数据观察者。所以我假设，当我更改数据时，图表会更新。但我在这里缺少一些东西。

Codesandbox：https://codesandbox.io/s/v8rdgz

我正在使用 vue3

[email protected]
[email protected]

我摆弄了道具、计算、参考，但没有实现我的目标。 这是我的最小例子。当按下更新图表按钮时。应该出现另一行。，应该出现另一行。

// LineChart.vue
<template>
  <Line :data="data" :options="options" />
</template>

<script>
import { Line } from "vue-chartjs";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

export default {
  components: { Line },
  props: ["data", "options"],
};
</script>

// App.vue
<template>
  <div>
    <button @click="updateGraph">Update Graph</button>
  </div>
  <div>
    <LineChart :data="chartData" :options="chartOptions" />
  </div>
</template>

<script>
import LineChart from "./components/LineChart.vue";

export default {
  data() {
    return {
      chartData: {
        labels: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
        ],
        datasets: [
          {
            label: "Data One",
            backgroundColor: "#f87979",
            data: [40, 39, 10, 40, 39, 80, 40],
          },
        ],
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false,
      },
    };
  },
  components: {
    LineChart,
  },

  methods: {
    updateGraph() {
      this.chartData.datasets.push({
        label: "Data Two",
        backgroundColor: "#f87979",
        data: [50, 59, 50, 50, 59, 50, 50],
      });
    },
  },
};
</script>

提前谢谢您！ 最好的问候

Answer 1

问题是您所做的更新太深了。您需要将

chartData

替换为其自身的更新版本，而不是简单地更新其

datasets

。

chart.js

确实支持改变

datasets

数组，但Vue不会深入观察数据更新。因此，除非您替换

this.chartData

，否则 Vue 不会更新

Line.vue

，由

LineChart.vue

在内部使用。

    updateGraph() {
      this.chartData = {
        ...this.chartData,
        datasets: [
          ...this.chartData.datasets, {
            label: "Data Two",
            backgroundColor: "#f87979",
            data: [50, 59, 50, 50, 59, 50, 50],
          }
        ]
      }
    }

工作演示。

---

或者，您可以通过在

:key="chartData.datasets.length"

组件上使用

<LineChart />

来告诉 Vue 组件何时需要重新渲染。但是，此方法从头开始重新渲染图表，因此您将获得初始数据动画，而不是从旧数据状态到新数据状态的动画。

我推荐第一种方法。

Answer 2

非常感谢您的解决方案。 Habíabuscadobastanteperonoencontrabalasolución。他可能会提出初步解决方案。 Probaré la segunda, aunque no me queda muy claro lo que hay que hacer en ese caso. Probaré la segunda, aunque no me queda muy claro lo que hay que hacer en ese caso。 Muy precisa la respuesta.