如何自定义vue-chartjs柱状图Y轴刻度以实现特定条形范围？

要实现条形从-20开始延伸到数据值的效果，核心是给数据集配置base属性，结合Y轴范围限制即可解决，具体步骤如下：

关键配置修改 #

1. 锁定Y轴范围：在图表options的Y轴配置中明确min和max，确保轴的显示范围固定为-20到70，同时关闭beginAtZero。
2. 指定条形起始基准：在数据集（dataset）中添加base: -20，这会让所有条形的起始位置固定在Y轴的-20刻度处，终点直接对应你的数据值。

修改后的示例代码 #

图表组件（BarChart.vue） #

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 {
  extends: Bar,
  props: {
    chartData: {
      type: Object,
      required: true
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
}

组件使用示例 #

<template>
  <BarChart :chartData="chartData" :options="chartOptions" />
</template>

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

export default {
  components: { BarChart },
  data() {
    return {
      chartData: {
        labels: ['示例1', '示例2', '示例3'],
        datasets: [{
          label: '数值',
          data: [20, -10, 70],
          backgroundColor: '#42b983',
          base: -20 // 核心配置：设置条形起始基准线
        }]
      },
      chartOptions: {
        scales: {
          y: {
            min: -20, // Y轴最小值
            max: 70, // Y轴最大值
            beginAtZero: false // 关闭从0开始的默认行为
          }
        }
      }
    }
  }
}
</script>

为什么之前的配置无效？ #

• beginAtZero: false只是关闭了强制从0开始的规则，但不会自动设置条形的起始基准线，所以条形仍会默认从0开始。
• stacked: true是用于多数据集堆叠的场景，和单个数据集的起始位置设置无关，因此对你的需求不适用。

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