Chart.js图表标签显示为单个字符的问题修复方法

问题描述 #

首次使用Chart.js时，将['sunday', 'monday']这类字符串数组传入图表组件作为标签，图表未显示完整字符串，而是将每个字符串拆分为单个字符（如"s"、"u"等）展示。问题截图如下：

组件代码 #

柱状图组件（AnalysisBarChart.vue） #

<template>
  <canvas :id="`myChart${id}`"></canvas>
</template>

<script>
import Chart from 'chart.js/auto';
export default {
  name: 'AnalysisBarChart',
  props: ['id', 'labels'],
  mounted() {
    const ctx = document.getElementById('myChart' + this.id).getContext('2d');
    const myChart = 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: this.id,
          },
        ],
      },
      options: {
        scales: {
          y: {
            beginAtZero: true,
          },
        },
      },
    });
    this.myChart = myChart; // 保存图表实例以便后续更新
  },
};
</script>

<style></style>

父组件传入标签的代码 #

labels: ['sunday', 'monday'],

修复方案 #

核心原因 #

问题出在父组件传递labels的方式错误：如果没有使用v-bind（简写为:）绑定labels，Vue会把数组字面量当作普通字符串传递，子组件收到的是字符串"['sunday', 'monday']"，而非真正的数组。Chart.js遇到字符串类型的labels时，会自动将其拆分为单个字符的数组，导致每个字符单独作为标签显示。

具体修复步骤 #

1. 正确绑定标签数组
   在父组件中使用v-bind传递labels，确保子组件收到的是数组类型：

   <AnalysisBarChart :id="1" :labels="['sunday', 'monday']" />
   

   这里的:是关键，它告诉Vue要传递的是JavaScript表达式（数组），而不是字符串字面量。

2. 添加props类型校验（可选但推荐）
   在子组件的props中添加类型校验，提前拦截错误类型的传入，避免后续问题：

   props: {
     id: {
       type: Number,
       required: true
     },
     labels: {
       type: Array,
       required: true,
       // 可选：校验数组元素是否为字符串
       validator: (value) => value.every(item => typeof item === 'string')
     }
   }
   

3. 支持异步更新标签（可选）
   如果labels是异步获取的数据，在子组件中添加watch监听labels变化，实时更新图表：

data() {
return {
myChart: null // 保存图表实例
}
},
watch: {
labels(newLabels) {
if (this.myChart) {
this.myChart.data.labels = newLabels;
this.myChart.update(); // 更新图表
}
}
}

---
内容的提问来源于stack exchange，提问作者MAHEEDHAR A