Chart.js - Styling Legend

问题:

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.

This is my HTML:

And this is my 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!

回答1:

No need to use legendCallback function. You can set usePointStyle = true to turn that rectangle into a circle.

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:

Step 1:
Change options to this:

options: {     legend: {         display: false,     } } 

Step 2:
Append to your canvas this code (just after canvas):

 //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):

document.getElementById('chartjsLegend').innerHTML = myChart.generateLegend(); 

Step 4:
Make css so it generates as circle:

.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.

文章来源: Chart.js - Styling Legend