Как добиться этого вида карты тепла / гистограммы с Chart.js

Question

Мне нужно построить горизонтальную полосу с чартами. Я уже построил несколько из них, но это немного по-другому. Диаграмма имеет 2 метки для оси Y («Штормовой риск», «Ледяной риск») и часы для xAxes. Мне нужно распечатывать для каждого часа один из этих вариантов с разными цветами («Низкий», «Средний», «Высокий»), как вы можете видеть на скриншоте.

Этот вид гистограммы, как правило, значения представлены длиной бара и немного отличается.

Любое предложение?.

Спасибо

Answer 1

Диаграмма, которую вы хотите реализовать, является своего рода «тепловой картой». На данный момент (сентябрь 2018 г.) диаграммы Heatmap не поддерживаются Chart.js "из коробки". Тем не менее, вы можете сделать один из столбчатой ​​диаграммы с накоплением (в данном случае, возможно, горизонтальной столбчатой ​​диаграммы с накоплением?): Сделать каждый размер стека равным друг другу и каждый элемент backgroundColor в зависимости от представляемых фактических значений. Как только это будет сделано, вы можете переопределить ticks и tooltips, используя соответствующие callbacks. Легенда может быть реализована еще одной гистограммой с примерами значений и цветов.

Более подробную информацию можно найти в связанной проблеме GitHub: https://github.com/chartjs/Chart.js/issues/4627

Другой альтернативой может быть использование BubbleChart. Стратегия будет похожа - вам нужно сделать все пузыри одинакового размера, но переопределить их цвета. Однако, если взглянуть на вопрос, горизонтальная гистограмма с накоплением будет более подходящей.