Chart.js horizo​​ntalBar自定义

Question

我正在尝试使用 chartJS 实现水平条形图。 原型是这样的：

但是我在执行负值时遇到了问题。 关于如何在同一张图表上使用不同方向的柱状图，您能给我一些帮助吗？

Answer 1

可以使用 floating bars. Individual bars are specified with the syntax [min, max]. This feature was introduced with 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>

Answer 2

实际上，chartJS 框架无法创建这样的图表。所以我不得不用js操作图表数据（和颜色）才能得到结果。 如果有人对更多细节感兴趣，我有空。