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

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

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

<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/hibited-williamson-upohe

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


javascript vue.js chart.js chartkick
person Leos Literak    schedule 10.11.2020    source источник

Ответы (2)


arrow_upward
3
arrow_downward

В документах chart.js указано, что тип horizontalBar был удален в 3.x, но chartkick-vue по-прежнему navascripts/chartkick.js#L928"> использует его.

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

npm i -S chart.js@^2

демонстрация

person tony19    schedule 11.11.2020
comment
Хорошо, я хотел избавиться от momentjs в версии 2.x, но есть побочные эффекты :-( - person Leos Literak; 11.11.2020

arrow_upward
2
arrow_downward

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

person uko    schedule 18.05.2021
comment
Это должен быть лучший ответ! Благодарность! - person HerberthObregon; 26.05.2021