作者：mobiledu2402851377 | 来源：互联网 | 2023-02-07 18:37
我正在用chart.js创建一个图表,我试图找出如何更改标签/图例样式.我想删除矩形部分,而是使用圆圈.我已经读过你可以制作你的自定义图例(使用legendCallback),但对于我的生活,我无法弄清楚如何做到这一点.这就是我的图表现在的样子 - 图像.
这是我的HTML:
这是我的JS:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Link One',
data: [1, 2, 3, 2, 1, 1.5, 1],
backgroundColor: [
'#D3E4F3'
],
borderColor: [
'#D3E4F3',
'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',
labels: {
fontColor: '#333',
}
}
}
});
我是JS的新手,所以请尽可能详细地说明你的答案.非常感谢!
1> ɢʀᴜɴᴛ..：
无需使用legendCallback功能.您可以设置 usePointStyle = true将该矩形转换为圆形.
Chart.defaults.global.legend.labels.usePointStyle = true;
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Link One',
data: [1, 2, 3, 2, 1, 1.5, 1],
backgroundColor: [
'#D3E4F3'
],
borderColor: [
'#D3E4F3',
'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',
labels: {
fontColor: '#333'
}
}
}
});
2> 小智..：
对于angular4-chart.js，您可以使用options属性，如下所示：
optiOns= {
legend:{
display: true,
labels: {
usePointStyle: true,
}
}
}
3> Konstantinos..：
步骤1：将
选项更改为此：
options: {
legend: {
display: false,
}
}
步骤2：
将此代码附加到画布上（紧随画布之后）：
//Or prepend to show the legend at top, if you append then it will show to bottom.
步骤3：
生成此图例，而不是使用它生成默认图例（在mychart之后）：
document.getElementById('chartjsLegend').innerHTML = myChart.generateLegend();
步骤4：
制作CSS，使其生成为圆形：
.chartjsLegend li span {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 5px;
border-radius: 25px;
}
第5步：
根据您的喜好更改CSS。
现在是时候进行一些chimichangas了。
京公网安备 11010802041100号