Chart.js：将标题/图例位置更改为右侧
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Chart.js：将标题/图例位置更改为右侧相关的知识，希望对你有一定的参考价值。
我有一个顶部标题的条形图。如何将图例的位置更改为图表右侧。我在其他表格上搜索但找不到任何东西。这是我的代码：
let ctx = document.getElementById('canvas');
let chart = new Chart(ctx, {
type: 'bar',
data: {
labels: [1, 2, 3, 4, 5],
datasets: [{
label: 'Votes',
data: [1, 2, 3, 4, 5],
backgroundColor: 'rgba(255, 0, 0, 0.2)'
}, {
label: 'Score',
data: [1, 2, 3, 4, 5],
backgroundColor: 'rgba(0, 255, 0, 0.2)'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
答案
您可以在图表选项中将图例的position属性设置为right，将图例放置在图表的右侧...
options: {
legend: {
position: 'right'
},
...
}
ᴅᴇᴍᴏ
let ctx = document.getElementById('canvas').getContext('2d');
let chart = new Chart(ctx, {
type: 'bar',
data: {
labels: [1, 2, 3, 4, 5],
datasets: [{
label: 'Votes',
data: [1, 2, 3, 4, 5],
backgroundColor: 'rgba(255, 0, 0, 0.2)'
}, {
label: 'Score',
data: [1, 2, 3, 4, 5],
backgroundColor: 'rgba(0, 255, 0, 0.2)'
}]
},
options: {
legend: {
position: 'right'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>以上是关于Chart.js：将标题/图例位置更改为右侧的主要内容，如果未能解决你的问题，请参考以下文章