如何使用图表js修改水平条形图

how to modify horizontal bar chart using chart js

请看我突出显示的行。

  1. 如何在 Y 轴上添加标签

  2. 如何把0位置的垂直线做成虚线。

  3. 如何制作如图所示的圆角。

我需要修改图表js条形图。

但是修改起来很复杂。如果有人对图表 js 有所了解,我们将不胜感激。

弄清楚这一点需要查看 chart.js 配置 here

  1. 要在 Y 轴的另一行上添加标签,您的标签需要以下结构 labels: [["Dept1", 81], ["Dept2", 82], ["Dept3", 83]]

  2. Chart.js 2.0默认可以处理负值,所以你需要做的就是传入你各自的数据点。像这样应该没问题:data: [12, -19, 5],

  3. 圆角问题有点棘手。我使用了链接 here 的外部库。存在一些 canvas 渲染技巧。请务必为他的回购加注星标,以表彰作者!

在此处生成 Fiddle:https://codepen.io/anon/pen/gKRQZG?editors=1000