vue-chartjs 水平条形图答案

【问题标题】：vue-chartjs horizontal bar chartvue-chartjs 水平条形图
【发布时间】：2023-01-20 07:00:12
【问题描述】：

我正在使用 Vue-chartjs 在 Vue 3 中创建条形图：

条形是垂直的。我如何使它们水平？

<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
      }
    }
  }
}
</script>

【问题讨论】：

如果答案有帮助，请批准它，以便将来人们可以确信它是正确的

标签： vue.js chart.js vuejs3 vue-chartjs

【解决方案1】：

设置 indexAxis 属性。

<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,
        indexAxis: 'y'
      }
    }
  }
}
</script>

使用图书馆时，您可以查看他们的documentation 以了解更多信息。

然后你会找到道具表；

其中说：

“选项：传递到 Chart.js 图表中的选项对象”。

您知道 vue-chartjs 是 Chart.js 库的 Vue 包装器库。因此，你去their documentation。然后转到“图表类型”部分并找到您的图表类型 (Bar Chart)。如果向下滚动一点，您会找到条形图的选项。对我来说最突出的是 indexAxis - 事实上 - 它有效。

演示：here

【讨论】：