ChartJS - 点的大小不会改变
[英]ChartJS - Size of the point doesn't change
问题描述
I created this chart, and set usePointStyle: true to use circles instead rectangles for the labels of legend .
我创建了这个图表，并将usePointStyle: true设置为使用圆形而不是矩形作为legend的标签。 But I can't seem to change the size (or radius ) of these circles.但我似乎无法改变这些圆圈的大小（或半径）。
In the documents it says ,在文件中说，
Label style will match corresponding point style (size is based on the mimimum value between boxWidth and fontSize).
So in my example, the size of point style must be min(5, 12) = 5 , thus increasing boxWidth must increase its size (until boxWidth is greater than fontSize ).所以在我的例子中，点样式的大小必须是min(5, 12) = 5 ，因此增加boxWidth必须增加它的大小（直到boxWidth大于fontSize ）。 But that's not the case;但事实并非如此。 changing boxWidth doesn't have any affect.更改boxWidth没有任何影响。
How can I fix this?我怎样才能解决这个问题？ Also, is it possible to fill these circles with their color?另外，是否可以用它们的颜色填充这些圆圈？
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>
1 个解决方案
解决方案1
1 已采纳 2019-10-05 19:15:08
To increase the size of the point, you will have to increase the legend's fontSize value.要增加点的大小，您必须增加图例的fontSize值。 When you increase the font-size both the label and the point's size will increase.当您增加字体大小时，label 和点的大小都会增加。
When you increase the boxWidth the overall width that the legend icon takes will increase.当您增加boxWidth时，图例图标的整体宽度将会增加。 In the case of the 'box' legend icon, the rectangle's width will increase.在“框”图例图标的情况下，矩形的宽度会增加。 But in case of point, all it will do is provide some extra space between the legend icon and its text.但在必要的情况下，它所要做的就是在图例图标和它的文本之间提供一些额外的空间。
To make the legend point circle fill with their color, you will have to set the backgroundColor property to that color and fill to false.要使图例点圆形填充其颜色，您必须将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'
}
]
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.