Vue3中如何将vue-chartjs垂直柱状图改为水平柱状图？

嘿，这事儿超简单！要把你的垂直柱状图转成水平的，只需要做一点点调整就行，下面给你两种可行的方案：

方案一：通过配置项修改（推荐） #

在你的chartOptions里添加indexAxis: 'y'即可——Chart.js默认的indexAxis是'x'（对应垂直柱状图），改成'y'就会翻转坐标轴，直接变成水平柱状图。

修改后的完整代码如下：

<template>
  <Bar
    id="my-chart-id"
    :options="chartOptions"
    :data="chartData"
  />
</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: [ { data: [40, 20, 12] } ]
      },
      chartOptions: {
        responsive: true,
        // 新增这一行，将索引轴切换为y轴
        indexAxis: 'y'
      }
    }
  }
}
</script>

方案二：直接使用HorizontalBar组件 #

如果你更习惯用组件的方式实现，也可以直接导入HorizontalBar组件代替原来的Bar组件，这样不需要修改任何配置项：

<template>
  <HorizontalBar
    id="my-chart-id"
    :options="chartOptions"
    :data="chartData"
  />
</template>

<script>
// 替换为HorizontalBar组件
import { HorizontalBar } 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: 'HorizontalBarChart',
  components: { HorizontalBar },
  data() {
    return {
      chartData: {
        labels: [ 'January', 'February', 'March' ],
        datasets: [ { data: [40, 20, 12] } ]
      },
      chartOptions: {
        responsive: true
      }
    }
  }
}
</script>

两种方案都能实现水平柱状图的效果，个人更推荐方案一，因为它更贴合Chart.js最新的API设计，也更灵活——你可以根据需求随时切换坐标轴方向。

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