chart -vue条形图- "horizontalBar“不是注册控制器

Question

我要将垂直柱形图转换为水平堆叠条形图。我使用带有chart.js 3.0测试版的chartkick-vue 0.61。

我当前的代码：

<column-chart :data="chartData" suffix="%"
              height="200px"
              :colors="[['#28a745', '#007bff', '#ffc107', '#dc3545']]">
</column-chart>

以这种方式呈现：

​

​

我找到了这个doc，但我不知道如何将它传递给chartkick-vue，所以我从水平条开始：

<bar-chart
  :data="chartData"
  suffix="%"
  height="200px"
  :colors="[['#28a745', '#007bff', '#ffc107', '#dc3545']]"
>

但失败的原因是：

Error Loading Chart: "horizontalBar" is not a registered controller

这是代码沙箱：https://codesandbox.io/s/pensive-williamson-upohe

我该怎么解决呢？

Answer 1

chart.js的docs表明在3.x中删除了horizontalBar类型，但chartkick-vue仍然是uses it。

解决方案是使用当前稳定版本的chart.js (2.x)，而不是3.x测试版：

npm i -S chart.js@^2

demo

Answer 2

现在，选项中实际上是带有indexAxis: 'y'的type: 'bar'。请参阅https://www.chartjs.org/docs/latest/samples/bar/horizontal.html