Chartkick-vue条形图-“ horizo​​ntalBar”不是已注册的控制器

编程问答 2022-06-03

问题描述

我想将垂直柱形图转换为水平堆积条形图。我在chartkick-vue 3.0-beta中使用chart.js 0.61。

我当前的代码：

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

以这种方式呈现：

enter image description here

我找到了这个doc，但是我不知道如何将其传递给chartkick-vue，所以我从单杠开始：

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

但是失败了：

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

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

我该如何解决？

解决方法

现在选项中实际上是 type: 'bar' 和 indexAxis: 'y'。 见https://www.chartjs.org/docs/latest/samples/bar/horizontal.html

,

for data in x: final_list.append(bool(int(data))) print(final_list) >>> [False,True,True etc...] # 0 = False,1 = True 的{​​{3}}表示chart.js类型已在3.x中删除，但horizontalBar仍为docs。

解决方案是使用chartkick-vue（2.x）的当前稳定版本，而不是3.x beta：

chart.js

uses it

chartkickjavascriptvue.js