Vue-Chartjs数据变更后折线图不重绘？Nuxt3/Vue3问题排查

核心问题分析 #

你的代码存在几个关键问题导致图表不渲染、监听不触发：props类型定义错误、watch未开启深度监听、模板中未绑定组件ref、父组件响应式状态访问错误，这些问题共同导致了图表初始化失败。

分步修复方案 #

1. 修正子组件props类型定义

父组件传递的chartData是对象类型（包含labels和datasets属性），但子组件中错误定义为Array，导致响应式绑定失效。

修改子组件ScatterChart.vue的props：

const props = defineProps({
  chartData: {
    type: Object, // 改为Object匹配父组件数据结构
    required: false,
    default: () => ({ labels: [], datasets: [] }) // 设置默认空对象
  },
});

2. 为watch开启深度监听

父组件是直接修改chartData内部属性（push labels/datasets），属于对象内部变化，默认watch只监听引用变化，必须开启深度监听才能捕获到数据更新。

修改子组件的watch逻辑：

watch(
  () => props.chartData,
  (newData) => {
    initChart(newData);
  },
  { deep: true } // 开启深度监听
);

3. 绑定Line组件的ref

子组件模板中的Line组件未绑定ref="lineChart"，导致初始化图表时无法获取到DOM元素，图表无法渲染。

修改子组件模板：

<template>
  <div class="line-chart dark:bg-gray-800 dark:text-white">
    <Line ref="lineChart" :data="props.chartData" :options="chartOptions" />
  </div>
</template>

4. 修复父组件颜色数组的访问方式

父组件中datasetColors是useState返回的响应式对象，访问数组元素必须加.value，否则会拿到响应式包装对象而非实际数组值。

修改父组件getData函数：

chartData.value.datasets.push({
    label: "TIME ",
    type: "line",
    // 修正：加.value，且索引从0开始
    borderColor: datasetColors.value[chartData.value.datasets.length],
    backgroundColor: datasetColors.value[chartData.value.datasets.length],
    borderWidth: 1,
    data: timeValues,
  });

5. 简化子组件逻辑（可选）

将图表初始化逻辑封装为单独函数，避免代码冗余，提升可读性：

function initChart(data) {
  if (chartInstance.value) {
    chartInstance.value.destroy();
  }
  if (data && data.datasets.length > 0) {
    chartInstance.value = new Line(lineChart.value, {
      data,
      options: chartOptions,
    });
  }
}

// 在onMounted和watch中调用该函数
onMounted(() => initChart(props.chartData));

修复后的完整代码 #

子组件 ScatterChart.vue

<template>
  <div class="line-chart dark:bg-gray-800 dark:text-white">
    <Line ref="lineChart" :data="props.chartData" :options="chartOptions" />
  </div>
</template>

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

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

const chartOptions = {
  responsive: true,
  maintainAspectRatio: false,
};

const props = defineProps({
  chartData: {
    type: Object,
    required: false,
    default: () => ({ labels: [], datasets: [] })
  },
});

const lineChart = ref(null);
const chartInstance = ref(null);

function initChart(data) {
  if (chartInstance.value) {
    chartInstance.value.destroy();
  }
  if (data && data.datasets.length > 0) {
    chartInstance.value = new Line(lineChart.value, {
      data,
      options: chartOptions,
    });
  }
}

onMounted(() => initChart(props.chartData));

watch(
  () => props.chartData,
  (newData) => initChart(newData),
  { deep: true }
);
</script>

父组件 Parent.vue

<template>
  <button type="button" @click="getData">GET DATA</button>
  <ScatterChart :chartData="chartData" />
</template>

<script setup>
const chartData = useState("chartData", () => ({ labels: [], datasets: [] }));
const datasetColors = useState("datasetColors", () => [
  "#FF6384",
  "#36A2EB",
  "#FFCE56",
  "#4BC0C0",
]);

function getData() {
  // 示例数据，替换为你的实际数据获取逻辑
  const dateString = new Date().toISOString().slice(0, 10);
  const timeValues = [Math.random() * 100, Math.random() * 100];

  if (!chartData.value.labels.includes(dateString)) {
    chartData.value.labels.push(dateString);
  }

  chartData.value.datasets.push({
    label: "TIME ",
    type: "line",
    borderColor: datasetColors.value[chartData.value.datasets.length],
    backgroundColor: datasetColors.value[chartData.value.datasets.length],
    borderWidth: 1,
    data: timeValues,
  });
}
</script>

内容的提问来源于stack exchange，提问作者BATMAN_2008