欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

chart.js horizontalBar,标签在柱形内显示

程序员文章站 2022-06-27 14:24:44
用chart.js做横向柱形图(horizontalBar),默认是像下面这样的: 但是最近遇到个需求,需要将Y轴的那些标签(东邪、西毒等等)显示在柱形上。 Google了好久,终于找到了解决方法。代码如下: 1 new Chart(canvas, { 2 type: 'horizontalBar' ......

chart.js做横向柱形图(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 即可达到想要的效果。

运行效果如下:

chart.js horizontalBar,标签在柱形内显示