0
305
Views¿Cómo convertir una leyenda de barra en una leyenda de línea en chart.js 2.7.2?
Estoy tratando de crear un gráfico de líneas usando chart.js v2.7.2 y así es como se ve: 
const labels = [ 'January', 'February', 'March', 'April', 'May', 'June', ]; const data = { labels: labels, datasets: [{ label: 'My First dataset', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [0, 10, 5, 2, 20, 30, 45], }] }; const config = { type: 'line', data: data, }; const myChart = new Chart( document.getElementById('myChart'), config ); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <body> <div> <canvas id="myChart"></canvas> </div> </body> </html>Aquí está mi código en JS Bin: https://jsbin.com/kegedewiyi/edit?html,js,output
Quiero que la leyenda se convierta en una línea en lugar de una barra.
·
Santiago Trujillo
2 answers
Answer question0
Me lo imaginé.
Solo tuve que usar pointStyle .
Aquí está la nueva imagen del gráfico:
Aquí está el código:
const labels = [ 'January', 'February', 'March', 'April', 'May', 'June', ]; const data = { labels: labels, datasets: [{ label: 'My First dataset', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [0, 10, 5, 2, 20, 30, 45], pointStyle: "line", }] }; const config = { type: 'line', data: data, options: { legend: { labels: { usePointStyle: true, } }, } }; const myChart = new Chart( document.getElementById('myChart'), config ); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <body> <div> <canvas id="myChart"></canvas> </div> </body> </html>Y aquí está el código en JS Bin: https://jsbin.com/lolajokujo/edit?html,js,output
·
Santiago Trujillo
Report
0
He proporcionado el código para su referencia. Consulte el enlace para una mayor comprensión https://www.chartjs.org/docs/2.7.3/configuration/legend.html https://www.chartjs.org/docs/latest/
const labels = [ 'January', 'February', 'March', 'April', 'May', 'June', ]; const data = { labels: labels, datasets: [{ label: 'My First dataset', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [0, 10, 5, 2, 20, 30, 45], }] }; const config = { type: 'line', data: data, options: { legend: { display: true, labels: { fontColor: 'rgb(255, 99, 132)' } } } }; const myChart = new Chart( document.getElementById('myChart'), config ); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <body> <div> <canvas id="myChart"></canvas> </div> </body> </html>
·
Santiago Trujillo
Report
Answer question