我是vue的新手，说实话，我不明白如何从它的paren更新一个图形。使用vue-dev-tools，我看到数据得到了更新，但没有触发图形更新。我发现很多关于vue 2和旧版本vue-chartjs API调用的过时信息+vue-chartjs新api的文档，这对我没有帮助。vue-chartjs说有数据观察者。所以我假设，当我改变数据时，图表也会更新。但我在这里错过了一些东西。

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

我用的是vue 3

vue-chartjs@5.2.0
chart.js@4.3.0

我摆弄 prop ，计算，裁判，但我没有达到我的目标。这是我最小的例子。按下“更新图表”按钮时。应该会出现另一条线。

// 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>

感谢您的评分最好的问候