Vue+Pinia环境下ChartJS图表需手动调整才加载的问题求助

问题原因分析 #

1. 数据加载时机不匹配：mounted钩子执行时，Pinia中的graphData大概率还在异步请求中，此时初始化Chart用的是空的xAxis和yAxis数组，后续数据更新后Chart没有感知到变化，自然不会重新渲染。
2. 尺寸配置冲突：给canvas标签硬编码了width="90%" height="90%"，同时开启了Chart的responsive: true，这会导致Chart的尺寸计算逻辑混乱，只有手动调整窗口触发resize事件时，Chart才会重新计算尺寸并正常显示。

解决方案 #

步骤1：监听Pinia数据变化，动态更新Chart #

用Vue的watch监听Pinia中graphData的变化，确保数据就绪后再初始化或更新Chart。

步骤2：修复Canvas尺寸配置 #

移除canvas标签上的width和height属性，改用容器包裹并设置容器宽高，让Chart的responsive配置自动适配。

修改后的完整代码 #

<template>
  <!-- 用容器包裹canvas，通过CSS控制宽高 -->
  <div class="chart-container">
    <canvas id="my-chart"></canvas>
  </div>
</template>

<script>
import { useDataStore } from "../stores/dataStore.js";
import { Chart, registerables } from "chart.js";
import { watch, onMounted, ref } from "vue";

Chart.register(...registerables);

export default {
  name: "App",

  setup() {
    const dataStore = useDataStore();
    // 保存Chart实例引用，方便后续更新
    const myChart = ref(null);

    onMounted(() => {
      const ctx = document.getElementById("my-chart");
      // 先初始化空数据的Chart结构
      myChart.value = new Chart(ctx, {
        type: "line",
        data: {
          labels: [],
          datasets: [
            {
              label: "24 Hour Balance (USD)",
              data: [],
              backgroundColor: ["rgba(255, 99, 132, 0.2)"],
              borderColor: ["rgba(255, 99, 132, 2)"],
              lineWidth: 1,
            },
          ],
        },
        options: {
          scales: {
            y: {
              beginAtZero: false,
            },
          },
          responsive: true,
          maintainAspectRatio: false, // 允许容器控制宽高比例
        },
      });
    });

    // 深度监听graphData的变化，更新Chart数据
    watch(
      () => dataStore.graphData,
      (newData) => {
        if (myChart.value && newData.xAxis.length && newData.yAxis.length) {
          myChart.value.data.labels = [...newData.xAxis];
          myChart.value.data.datasets[0].data = [...newData.yAxis];
          // 通知Chart重新渲染
          myChart.value.update();
        }
      },
      { deep: true }
    );

    return {
      dataStore,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

/* 设置图表容器的宽高 */
.chart-container {
  width: 90%;
  height: 400px;
  margin: 0 auto;
}
</style>

关键说明 #

• watch监听：通过深度监听graphData的变化，确保数据更新后立即同步到Chart，并调用update()触发渲染。
• 容器控制尺寸：移除canvas的硬编码尺寸，改用容器CSS控制宽高，配合maintainAspectRatio: false让Chart完全适配容器大小。
• 初始化空结构：先创建空数据的Chart实例，避免数据未就绪时Chart无法初始化，后续通过更新数据触发渲染。

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