我创建了此图表，并将 usePointStyle: true 设置为使用圆形而不是矩形作为 legend 的标签。但我似乎无法更改这些圆圈的大小(或半径)。
在文档中it says ,
Label style will match corresponding point style (size is based on the mimimum value between boxWidth and 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'
}
]
关于javascript - ChartJS - 点的大小不会改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58239795/