Chart.js 水平条自定义

Question

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

但是我在实施负值时遇到了问题。您能否就如何在同一张图表上使用不同方向的条形图提供一些帮助？

Answer 1

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

Answer 2

可以使用浮动条来完成具有不同方向的绘制条。使用语法指定各个条形图[min, max]。此功能是在Chart.js v2.9.0中引入的。new Chart(document.getElementById('canvas'), {&nbsp; type: 'horizontalBar',&nbsp; data: {&nbsp; &nbsp; labels: [1, 2, 3, 4],&nbsp; &nbsp; datasets: [{&nbsp; &nbsp; &nbsp; label: 'data',&nbsp; &nbsp; &nbsp; data: [[-3, 0], [0, 6], [-4, 0], [0, 5]],&nbsp; &nbsp; &nbsp; backgroundColor: ['red', 'blue', 'green', 'orange']&nbsp; &nbsp; }]&nbsp; },&nbsp; options: {&nbsp; &nbsp; responsive: true,&nbsp; &nbsp; legend: {&nbsp; &nbsp; &nbsp; display: false&nbsp; &nbsp; },&nbsp; &nbsp; title: {&nbsp; &nbsp; &nbsp; display: false&nbsp; &nbsp; }&nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script><canvas id="canvas" height="90"></canvas>