Javascript Chart.js - 造型传奇
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43173081/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chart.js - Styling Legend
提问by Retros
I'm making a chart with chart.js and I'm trying to figure out how I can change the label/legend styling. I want to remove the rectangle part and instead use a circle. I've read that you can make your custom legend (using legendCallback), but for the life of me I cannot figure out how to do it. This is how my chart looks now - image.
我正在使用 chart.js 制作图表，并且正在尝试弄清楚如何更改标签/图例样式。我想删除矩形部分，而是使用圆形。我读过你可以制作你的自定义图例（使用legendCallback），但对于我的生活，我不知道该怎么做。这就是我的图表现在的样子 -图像。
This is my HTML:
这是我的 HTML：
<div class="container">
<canvas id="myChart"></canvas>
</div>
And this is my JS:
这是我的 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',
}
}
}
});
I'm new to JS in general, so please be as specific as possible with your answers. Thank you so much!
我是 JS 的新手，所以请尽可能具体地回答你的问题。非常感谢！
回答by ?????
No need to use legendCallbackfunction. You can set usePointStyle = trueto turn that rectangle into a circle.
无需使用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'
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="container">
<canvas id="myChart"></canvas>
</div>回答by Orit
for angular4-chart.js you could use the options attribute like so:
对于 angular4-chart.js，您可以像这样使用 options 属性：
options = {
legend:{
display: true,
labels: {
usePointStyle: true,
}
}
}
回答by Konstantinos
Step 1:
Change options to this:
第 1 步：将
选项更改为：
options: {
legend: {
display: false,
}
}
Step 2:
Append to your canvas this code (just after canvas):
第 2 步：
将此代码附加到您的画布（就在画布之后）：
<div id='chartjsLegend' class='chartjsLegend'></div> //Or prepend to show the legend at top, if you append then it will show to bottom.
Step 3:
Generate this legend instead of default with this (just after mychart):
第 3 步：
用这个生成这个图例而不是默认值（就在 mychart 之后）：
document.getElementById('chartjsLegend').innerHTML = myChart.generateLegend();
Step 4:
Make css so it generates as circle:
第 4 步：
使 css 生成圆形：
.chartjsLegend li span {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 5px;
border-radius: 25px;
}
Step 5:
Change css with what ever you feel like should be better.
Time for some chimichangas now.
第 5 步：
使用您认为应该更好的方式更改 css。
现在是时候吃点chimichangas了。
回答by user3094318
Use usePointStyle:true
使用usePointStyle:true
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',
usePointStyle:true
}
}
}
});
});
回答by Aljohn Yamaro
Additional information on @GRUNT 's answer I assign usePointStyle inside legend.labels not what @GRUNT did Chart.defaults.global.legend.labels.usePointStyle = true;
关于@GRUNT 答案的其他信息我在legend.labels 中分配了usePointStyle 而不是@GRUNT 所做的Chart.defaults.global.legend.labels.usePointStyle = true;
This is useful when you are using react
这在您使用 react 时很有用
legend: {
labels: {
usePointStyle: true,
},
}
more info here Display point style on legend in chart.js
更多信息在这里 在chart.js中的图例上显示点样式
