ChartJS 水平条形图

n1bvdmb6 于 2023-01-13 发布在 Chart.js

关注(0)|答案(1)|浏览(204)

我使用以下示例在Vue 3中创建条形图：www.example.com网站。https://vue-chartjs.org/guide/#creating-your-first-chart.
这些条是垂直的，我怎么把它们变成水平的？

<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>

chart.js

来源：https://stackoverflow.com/questions/75086053/vue-chartjs-horizontal-bar-chart

1条答案

按热度按时间

jmo0nnb31#

设置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以了解更多信息。
然后你会发现 prop 表;

其中写道：
options：传递到Chart.js图表的选项对象。
您知道vue-chartjs是Chart.js库的Vue Package 器库。因此，您转到their documentation。然后转到Chart Types部分并找到您的图表类型（Bar Chart）。如果您向下滚动一点，您会找到条形图的选项。对我来说，最明显的是indexAxis -事实上-它工作正常。
演示：here

赞(0）回复(0）举报 2023-01-13

我来回答

ChartJS 水平条形图

1条答案

相关问题

热门标签

最新问答