ChartJS与Vue-ChartJS：图表配置中scales配置不生效问题

针对你使用ChartJS 4.4.2和Vue-ChartJS 5.3.1时遇到的scales配置无UI影响的问题，以下是具体修复方案：

问题分析 #

1. barPercentage和categoryPercentage配置位置错误：这两个属性是数据集（dataset）的专属配置，而非x轴的scales配置项，放在x轴配置中不会生效。
2. 缺少容器高度设置：当maintainAspectRatio: false时，图表需要父容器提供固定高度才能正常渲染，否则scales的配置效果会被压缩或无法显示。

修复后的代码 #

<template>
  <!-- 给图表容器设置固定高度 -->
  <div style="height: 400px;">
    <Bar :data="chartData" :options="chartOptions" />
  </div>
</template>

<script>
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

export default {
    name: 'BarChart',
    components: { Bar },
    data() {
        return {
            chartData: {
                labels: ['January', 'February', 'March'],
                datasets: [
                    {
                        label: 'Data One',
                        backgroundColor: '#f87979',
                        data: [40, 20, 12],
                        // 将barPercentage和categoryPercentage移到数据集配置中
                        barPercentage: 0.5,
                        categoryPercentage: 0.8
                    }
                ]
            },
            chartOptions: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                plugins: {
                    title: {
                        display: true,
                        text: 'Custom Chart Title'
                    },
                    legend: {
                        display: true,
                        position: 'top',
                    },
                    tooltip: {
                        enabled: true,
                    }
                }
            }
        }
    }
}
</script>

关键说明 #

• 移到数据集里的barPercentage和categoryPercentage会直接控制柱子的宽度和柱子之间的间距。
• 父容器的高度可以根据需求调整，确保图表有足够的渲染空间后，beginAtZero: true的y轴配置就能正常生效。

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