Chart.js柱状图无法显示问题求助

问题代码核心问题 #

你的BarChart.vue存在几个关键问题导致图表无法正常渲染：

1. 注释了props定义，this.labels为undefined，Chart.js无法识别无效的标签数据
2. 使用原生getElementById获取DOM元素，不符合Vue的最佳实践，且存在潜在异步渲染问题
3. 图表实例未被保留，可能被JavaScript垃圾回收机制清理
4. Canvas未指定明确尺寸，Chart.js可能无法正确计算渲染区域

修复后的组件代码 #

<template>
  <!-- 给canvas设置明确宽高，也可通过CSS样式控制 -->
  <canvas ref="chartCanvas" width="400" height="300"></canvas>
</template>

<script>
import Chart from 'chart.js/auto';

export default {
  name: 'BarChart',
  // 声明props接收父组件传递的标签数据
  props: {
    labels: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {
      chartInstance: null // 存储图表实例，避免被垃圾回收
    };
  },
  mounted() {
    // 使用Vue的ref获取DOM元素，比getElementById更可靠
    const ctx = this.$refs.chartCanvas.getContext('2d');
    
    this.chartInstance = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: this.labels,
        datasets: [
          {
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)',
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
            ],
            borderWidth: 5,
          },
        ],
      },
      options: {
        scales: {
          y: {
            beginAtZero: true,
          },
        },
      },
    });
  },
  // 组件销毁时销毁图表实例，避免内存泄漏
  beforeUnmount() {
    if (this.chartInstance) {
      this.chartInstance.destroy();
    }
  }
};
</script>

父组件正确调用方式 #

必须传递labels属性，否则图表仍会因数据缺失无法渲染：

<template>
  <div>
    <BarChart :labels="['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']" />
  </div>
</template>

<script>
import BarChart from './BarChart.vue';

export default {
  components: {
    BarChart
  }
};
</script>

额外排查要点 #

• 若使用vue-chart.js，需遵循其组件继承规范（比如继承Bar基础组件），但核心问题仍集中在标签数据缺失和实例管理上
• 若图表仍不显示，检查浏览器控制台报错信息，常见问题包括Chart.js版本兼容性、依赖未正确安装

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