Estoy haciendo un gráfico con chart.js y estoy tratando de averiguar cómo puedo cambiar el estilo de etiqueta/leyenda. Quiero eliminar la parte del rectángulo y en su lugar usar un círculo. He leído que puedes hacer tu leyenda personalizada (usando legendCallback), pero por mi vida no puedo entender cómo hacerlo. Así es como se ve mi gráfico ahora: imagen .
Este es mi HTML:
<div class="container"> <canvas id="myChart"></canvas> </div>Y este es mi 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', } } } });Soy nuevo en JS en general, así que sea lo más específico posible con sus respuestas. ¡Muchas gracias!
No es necesario utilizar la función legendCallback . Puede configurar usePointStyle = true para convertir ese rectángulo en un círculo.
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>para angular4-chart.js puede usar el atributo de opciones así:
options = { legend:{ display: true, labels: { usePointStyle: true, } } }Paso 1:
Cambia las opciones a esto:
options: { legend: { display: false, } } Paso 2:
Agregue a su lienzo este código (justo después del lienzo):
<div id='chartjsLegend' class='chartjsLegend'></div> //Or prepend to show the legend at top, if you append then it will show to bottom. Paso 3:
Genere esta leyenda en lugar de la predeterminada con esto (justo después de mychart):
document.getElementById('chartjsLegend').innerHTML = myChart.generateLegend(); Paso 4:
Haz css para que genere un círculo:
.chartjsLegend li span { display: inline-block; width: 12px; height: 12px; margin-right: 5px; border-radius: 25px; } Paso 5:
Cambia css con lo que creas que debería ser mejor.
Hora de unas chimichangas ahora.