Chart.js是一个流行的JavaScript库,用于创建响应式、动态的图表。它提供了许多有用的功能,其中之一就是可以轻松地添加图例(legend)。
要添加图例,需要在Chart对象的配置选项中指定一个legend对象。例如,以下代码创建一个简单的柱状图,并将图例放置在底部:
```javascript
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
legend: {
display: true,
position: 'bottom'
}
}
});
```
在上面的代码中,`legend`对象的`display`属性设置为`true`,表示要显示图例。`position`属性设置为`bottom`,表示将图例放置在底部。
当然,还有许多其他的选项可以配置,例如`labels`属性用于设置图例中的标签,`onClick`属性用于设置单击图例时的回调函数等等。具体的选项可以参考Chart.js的文档。