0
183
VistasPirámide de edad: 3.5.1 chartjs
Quiero crear una pirámide de edad usando pure chartjs 3.5.1. He visto el gráfico de pirámide de edad del subproceso usando chart.js , pero una de las soluciones usa react, otra no es compatible con chartjs 3.+.
El resultado debería ser similar a esto: 
¡Realmente aprecio tu ayuda!
Saludos.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Sí, puede usar barras flotantes junto con falsificar las escalas, puede usar números negativos para 1 de los 2 conjuntos de datos e invertir todos esos números con todas las devoluciones de llamada:
var options = { type: 'bar', data: { labels: ["0-10", "10-20", "20-30"], datasets: [{ label: 'Girls', data: [ [ 0, 12 ], [ 0, 19 ], [ 0, 3 ] ], backgroundColor: 'pink', barPercentage: 1, categoryPercentage: 1, borderColor: 'black', borderWidth: 1 }, { label: 'Boys', data: [ [ 0, -7 ], [ 0, -11 ], [ 0, -5 ] ], backgroundColor: 'lightBlue', barPercentage: 1, categoryPercentage: 1, borderColor: 'black', borderWidth: 1, borderSkipped: 'none' // Leave this line out to remove middle border at 0 line } ] }, options: { plugins: { tooltip: { callbacks: { label: (ttItem) => (Math.abs(ttItem.parsed.x)) // Inverse negatives to positive numbers } } }, indexAxis: 'y', scales: { y: { stacked: true, grid: { display: false } }, x: { min: -20, max: 20, ticks: { callback: (val) => (Math.abs(val)) // Inverrt negatives to positive numbers } } } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> </body>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta