我创建了此图表，并将usePointStyle: true设置为使用圆形而不是矩形作为legend的标签。但是我似乎无法更改这些圆圈的大小（或radius）。
在文档it says中，
标签样式将与相应的点样式匹配（大小基于mimimum值，位于boxWidth和fontSize之间。
因此，在我的示例中，点样式的大小必须为min(5, 12) = 5，因此增大boxWidth必须增大其大小（直到boxWidth大于fontSize）。但是事实并非如此。更改boxWidth没有任何影响。
我该如何解决？另外，是否可以用颜色填充这些圆圈？
let chLine = document.getElementById("chLine");
let chartData = {
labels: ['l1', 'l2', 'l3', 'l4', 'l5', 'l6', 'l7', 'l8', 'l9'],
datasets: [{
label: 'c1',
data: [0.3, 0.4, 0.5, 0.35, 0.2, 0.5, 0.4, 0.55, 0.6],
backgroundColor: 'transparent',
borderColor: '#e6194b',
borderWidth: 1,
pointBackgroundColor: '#e6194b'
},
{
label: 'c2',
data: [0.7, 0.5, 0.2, 0.4, 0.6, 0.1, 0.88, 0.35, 0.45],
backgroundColor: 'transparent',
borderColor: '#3cb44b',
borderWidth: 1,
pointBackgroundColor: '#3cb44b'
}
]
}
if (chLine) {
new Chart(chLine, {
type: 'line',
data: chartData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
position: 'top',
labels: {
fontSize: 12,
boxWidth: 5,
usePointStyle: true
}
},
events: ['click', 'mousemove'],
onClick: clicked
}
});
}
function clicked(c, i) {
console.log(c, i)
}<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div class="row my-3">
<div class="col">
<h4>Chart</h4>
</div>
</div>
<div class="row my-2">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<canvas id="chLine" height="100"></canvas>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="test.js"></script>
</body>
</html>要增加点的大小，必须增加图例的fontSize值。当您增加字体大小时，标签和点的大小都会增加。
增加boxWidth时，图例图标所占的总宽度将增加。对于“框”图例图标，矩形的宽度将增加。但是，如果要指出的话，它所要做的就是在图例图标与其文本之间提供一些额外的空间。
要使图例点圆填充其颜色，必须将backgroundColor属性设置为该颜色，并将fill设置为false。
datasets: [{
label: 'c1',
data: [0.3, 0.4, 0.5, 0.35, 0.2, 0.5, 0.4, 0.55, 0.6],
backgroundColor: '#e6194b',
borderColor: '#e6194b',
borderWidth: 1,
fill: false,
pointBackgroundColor: '#e6194b'
},
{
label: 'c2',
data: [0.7, 0.5, 0.2, 0.4, 0.6, 0.1, 0.88, 0.35, 0.45],
backgroundColor: '#3cb44b',
borderColor: '#3cb44b',
borderWidth: 1,
fill: false,
pointBackgroundColor: '#3cb44b'
}
]