chart.js horizontalBar，標簽在柱形內顯示

用chart.js做橫向柱形圖（horizontalBar），默認是像下面這樣的：

 

 

但是最近遇到個需求，需要將Y軸的那些標簽（東邪、西毒等等）顯示在柱形上。

Google了好久，終於找到了解決方法。代碼如下：

        new Chart(canvas, {
            type: 'horizontalBar',
            data: {
                labels: ['東邪', '西毒', '南帝', '北丐', '中神通'],
                datasets: [{
                    backgroundColor: 'rgba(205, 88, 100, 0.3)',
                    borderColor: 'rgb(205, 88, 100)',
                    data: [100, 200, 300, 400, 500]
                }]
            },
            options: {
                title: {
                    display: false
                },
                legend: {
                    display: false
                },
                scales: {
                    xAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            mirror: true // 只需將 mirror 設為 true 即可達到想要的效果
                        }
                    }]
                }
            }
        });

只需將 mirror 設為 true 即可達到想要的效果。

運行效果如下：