Chart. js HorizontalBar Настройка

Question

Я пытаюсь реализовать горизонтальную гистограмму с диаграммой JS. Прототип таков:

Но у меня возникают проблемы с реализацией отрицательных значений. Не могли бы вы помочь мне с тем, как я могу использовать бары с разными ориентациями на одном графике?

Answer 1

Рисование полос с различной ориентацией можно выполнить с помощью плавающих полос . Отдельные бары указываются с синтаксисом [min, max]. Эта функция была представлена ​​с Chart. js v2.9.0 .

new Chart(document.getElementById('canvas'), {
  type: 'horizontalBar',
  data: {
    labels: [1, 2, 3, 4],
    datasets: [{
      label: 'data',
      data: [[-3, 0], [0, 6], [-4, 0], [0, 5]],
      backgroundColor: ['red', 'blue', 'green', 'orange']
    }]
  },
  options: {
    responsive: true,
    legend: {
      display: false
    },
    title: {
      display: false
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="90"></canvas>