Chart.js horizontalBar定制

Question

我正在尝试用chartJS实现一个水平条形图。原型是：

​

​

但我在负价值观的实现上遇到了问题。你能给我一些帮助吗?如何使用同一图表上不同方向的条形图？

Answer 1

实际上，没有办法用chartJS框架创建这样的图表。因此，我不得不使用js操作图表数据(和颜色)以获得结果。如果有人对更多的细节感兴趣，我就有空。

Answer 2

用浮杆可以实现不同方向的拉拔。单个条形图是用语法[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>

​