chart.js horizontalBar,标签在柱形内显示
程序员文章站
2022-06-27 14:24:44
用chart.js做横向柱形图(horizontalBar),默认是像下面这样的: 但是最近遇到个需求,需要将Y轴的那些标签(东邪、西毒等等)显示在柱形上。 Google了好久,终于找到了解决方法。代码如下: 1 new Chart(canvas, { 2 type: 'horizontalBar' ......
用chart.js做横向柱形图(horizontalbar),默认是像下面这样的:
但是最近遇到个需求,需要将y轴的那些标签(东邪、西毒等等)显示在柱形上。
google了好久,终于找到了解决方法。代码如下:
1 new chart(canvas, { 2 type: 'horizontalbar', 3 data: { 4 labels: ['东邪', '西毒', '南帝', '北丐', '中神通'], 5 datasets: [{ 6 backgroundcolor: 'rgba(205, 88, 100, 0.3)', 7 bordercolor: 'rgb(205, 88, 100)', 8 data: [100, 200, 300, 400, 500] 9 }] 10 }, 11 options: { 12 title: { 13 display: false 14 }, 15 legend: { 16 display: false 17 }, 18 scales: { 19 xaxes: [{ 20 ticks: { 21 beginatzero: true 22 } 23 }], 24 yaxes: [{ 25 ticks: { 26 mirror: true // 只需将 mirror 设为 true 即可达到想要的效果 27 } 28 }] 29 } 30 } 31 });
只需将 mirror 设为 true 即可达到想要的效果。
运行效果如下: