chart.js horizontalBar,標籤在柱形內顯示

chart.js作橫向柱形圖(horizontalBar),默認是像下面這樣的:canvas

 

 

可是最近遇到個需求,須要將Y軸的那些標籤(東邪、西毒等等)顯示在柱形上。spa

Google了很久,終於找到了解決方法。代碼以下:code

 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 便可達到想要的效果。

運行效果以下:

相關文章
相關標籤/搜索