0
284
VistasContando cadenas para trazar un gráfico usando chart.js y angular
Estoy tratando de crear un gráfico de barras en angular usando chart.js y angular. Quiero mostrar el área de desastres vs. con el tipo de desastre (terremoto, huracán, tormenta... etc.) en el eje x y el área (como en la ubicación) en el eje y. Sin embargo, los datos del área son una cadena y no funcionan cuando se intenta trazar un gráfico de barras, ya que requiere números. Estoy leyendo los datos de la siguiente manera:
ngOnInit(): void { this.chartService.noOfEqu().subscribe((res) => { let area = res.map((res) => res.area); let disaster = res.map((res) => res.disasterNature); new Chart('disasterCanvas', { type: 'bar', data: { labels: disaster, datasets: [ { data: area, label: 'area', backgroundColor: '#A121D5', }, ], }, options: { plugins: { legend: { display: true, }, }, scales: { x: { ticks: { display: true, }, }, y: { ticks: { display: true, }, }, }, }, }); }); } } Donde let area = res.map((res) => res.area); es la variable área. Quiero saber cuál es la mejor manera de estructurar los datos que se ingresarán en el gráfico. Los datos de desastre que se registran son:
y los datos de la zona:
¿Cómo puedo estructurar el área de modo que cuente cuántas áreas ha ocurrido un desastre y trazarlo en el gráfico de barras? Gracias de antemano ... si hay algo que pueda aclarar, hágamelo saber en los comentarios.
Además, ¿hay otra forma de mostrar estos datos además de contar los datos de la cadena?
1 Respuestas
Responde la pregunta0
Debe agregar una matriz de etiquetas a la escala y establecer el tipo en categoría para usar datos de cadena:
const options = { type: 'bar', data: { labels: ["Earthquake", "Tornade", "Flood"], datasets: [{ label: '# of Votes', data: ['Paris', 'Berlin', 'London'], backgroundColor: 'pink' }] }, options: { scales: { y: { type: 'category', reverse: true, labels: ['', 'London', 'Paris', 'Berlin'] } } } } const 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.7.1/chart.js"></script> </body>