0
464
Views¿Cómo agrega etiquetas de eje tanto en el eje x como en el eje y? (Gráfico.js)
Tengo un chart.js ejecutándose, pero realmente quiero agregar nombres de ejes en los ejes, pero no sé cómo. ¿Podría obtener ayuda?
He intentado averiguarlo buscando, pero no puedo encontrar nada que lo explique bien.
Lo que estoy tratando de obtener: 
Mi código de gráfico:
const ctx = document.getElementById('chart').getContext('2d'); window.myChart = new Chart(ctx,{ // having the "myChart" as a window. insted of const was sugested by someone on StackOverflow (makes the const global, i can therefor use it in another function) type: 'line', data: { labels: arrayTheta, datasets: [{ //label: graphLabels, data: arrayRangeArray[0], backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgba(255, 99, 132, 1)', pointRadius: 0, tension: 0.4 //The line "tension: 0.4" makes the graph a little bit smoother (might remove later) }, { //label: graphLabels, data: arrayRangeArray[1], backgroundColor: 'blue, 0.2', borderColor: 'blue', pointRadius: 0, tension: 0.4 }, { //label: graphLabels, data: arrayRangeArray[2], backgroundColor: 'pink, 0.2', borderColor: 'pink', pointRadius: 0, tension: 0.4 }, { //label: graphLabels, data: arrayRangeArray[3], backgroundColor: 'orange, 0.2', borderColor: 'orange', pointRadius: 0, tension: 0.4 }, { //label: graphLabels, data: arrayRangeArray[4], backgroundColor: 'yellow, 0.2', borderColor: 'yellow', pointRadius: 0, tension: 0.4 }, { //label: graphLabels, data: arrayRangeArray[5], backgroundColor: 'black, 0.2', borderColor: 'black', pointRadius: 0, tension: 0.4 }], }, options: { scales: { y: { beginAtZero: true } ,x: { display: true, type: 'linear' } } } });Sería increíble si alguien pudiera implementarlo en mi código y enviarlo aquí.
¡¡Gracias por adelantado!!
·
Santiago Trujillo
1 answers
Answer question0
Esto se puede hacer con las siguientes options :
options: { scales: { y: { beginAtZero: true, title: { display: true, text: 'Y-Axis Label' } }, x: { title: { display: true, text: 'X-Axis Label' } } } }Para obtener más información, consulte Configuración de título de escala en la documentación de
Chart.js.
Eche un vistazo a su código modificado y vea cómo funciona con datos estáticos.
new Chart('chart', { type: 'line', data: { labels: ['A', 'B','C','D','E'], datasets: [{ label: 'Dataset 1', data: [8, 7, 5, 6, 2], backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgba(255, 99, 132, 1)', pointRadius: 0, tension: 0.4 }, { label: 'Dataset 2', data: [2, 4, 2, 4, 7], backgroundColor: 'blue, 0.2', borderColor: 'blue', pointRadius: 0, tension: 0.4 }, { label: 'Dataset 3', data: [5, 8, 7, 6, 2], backgroundColor: 'pink, 0.2', borderColor: 'pink', pointRadius: 0, tension: 0.4 }, { label: 'Dataset 4', data: [8, 7, 5, 6, 2], backgroundColor: 'orange, 0.2', borderColor: 'orange', pointRadius: 0, tension: 0.4 }, { label: 'Dataset 5', data: [5, 3, 2, 4, 1], backgroundColor: 'yellow, 0.2', borderColor: 'yellow', pointRadius: 0, tension: 0.4 }, { label: 'Dataset 6', data: [5, 6, 2, 8, 7], backgroundColor: 'black, 0.2', borderColor: 'black', pointRadius: 0, tension: 0.4 } ], }, options: { scales: { y: { beginAtZero: true, title: { display: true, text: 'Y-Axis Label' } }, x: { title: { display: true, text: 'X-Axis Label' } } } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script> <canvas id="chart" height="110"></canvas>
·
Santiago Trujillo
Report
Answer question