Гистограмма Chartkick-vue - "horizontalBar" не является зарегистрированным контроллером

#javascript #vue.js #chart.js #chartkick

Вопрос:

Я хочу преобразовать свою вертикальную столбчатую диаграмму в горизонтальную столбчатую диаграмму. Я использую chartkick-vue 0.61 с chart.js 3.0-бета-версией.

Мой текущий код:

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

отображается таким образом:

Я нашел этот документ, но я понятия не имею, как передать это 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

Как мне это решить?

Ответ №1:

На самом деле это уже type: 'bar' indexAxis: 'y' в настройках. См . https://www.chartjs.org/docs/latest/samples/bar/horizontal.html

Ответ №2:

chart.js в документах указано, что horizontalBar тип был удален в 3.x, но chartkick-vue все еще использует его.

Решение состоит в том, чтобы использовать текущую стабильную версию chart.js (2.x) вместо бета-версии 3.x:

 npm i -S chart.js@^2

ДЕМОНСТРАЦИЯ