Chart.js 水平条自定义

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>