Chart.js 水平条自定义

Question

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

但是我在实施负值时遇到了问题。 你能给我一些关于如何在同一图表上使用不同方向的条形的帮助吗？

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>

Answer 2

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