用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 即可达到想要的效果。