0
265
VistasMostrando '% indefinido' en el gráfico si los datos no existen
Tengo este gráfico y para datos que no existen, mostrará "% indefinido". 
¿Cómo puedo deshacerme del "% indefinido" y simplemente no mostrar nada en el gráfico si los datos no existen?
A continuación se muestran los códigos:
import { Bar } from "react-chartjs-2"; import "chartjs-plugin-datalabels"; import { Chart } from "chart.js"; import ChartDataLabels from "chartjs-plugin-datalabels"; Chart.register(ChartDataLabels); <Bar data={{ labels, datasets: //datasets here }} options={{ scales: { y: { min: 0, max: 100, ticks: { stepSize: 20, callback: function (value) { return ((value / this.max) * 100).toFixed(0) + "%"; }, }, }, }, plugins: { tooltip: { callbacks: { label: function (context) { var label = context.dataset.label || ""; if (context.parsed.y !== null) { label += " " + context.parsed.y + "%"; } return label; }, }, }, datalabels: { formatter: (val, context) => `${val}%`, }, // for the label percentage symbol inside the graph }, }} />
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
Puede verificar si val existe usando declaraciones if
datalabels: { formatter: (val, context) => { if(val) return `${val}%` return; }, }, //
·
Juan Pablo Isaza
Denunciar
0
Si solo desea mostrar 0 en caso de indefinido (o cualquier declaración falsa), puede usar || operador.
datalabels: { formatter: (val, context) => `${val || 0}%`, }
·
Juan Pablo Isaza
Denunciar
0
El problema parece ser esta línea: return ((value / this.max) * 100).toFixed(0) + "%"; Algo allí, probablemente el value no está undefined o algo así. ¿Puede mostrar nada condicionalmente con, por ejemplo return value ? ((value / this.max) * 100).toFixed(0) + "%" : null;
·
Juan Pablo Isaza
Denunciar
Responde la pregunta