Cómo ocultar / no dibujar barras con valores 0 / nulos / sin definir?
Cómo ocultar valores que son falsos ? ( 0, null o undefined)
He intentado hacer algo así
new Chart(this.barCanvas.nativeElement, {
...
data: {
datasets: [{
data: [
value < 1 ? null : value,
value2 < 1 ? null : value2,
valueX < 1 ? null : valueX,
],
}],
},
options: {
skipNull: true,
}
...
Pero no funciona.
He encontrado algunas publicaciones similares en SOF sin respuestas o soluciones funcionales
Inspirado en la respuesta de LeeLenalee y el comentario de zhulien, he creado una variable chartData
que filtro antes de pasarla.
Pero pasar la variable chartData
genera un error de tipo en data
(copiar y pegar el objeto de chartData
y pasarlo directamente no genera un error de tipo, pero la vista del gráfico no se carga)
indexToRemove
es un arreglo de índices basado en datos que están a 0
var chartData = {
labels: ['Batterie faible', 'Maintenance', 'HS', 'Place libre', 'Place occupée'].filter((v, i) => indexToRemove.includes(i)),
datasets: [{
label: '',
data: data.filter((v, i) => indexToRemove.includes(i)),
backgroundColor: [
'#F6741A',
'#dc2625',
'#B91C1B',
'#22c55e',
'#FACC14'
].filter((v, i) => indexToRemove.includes(i)),
borderRadius: 4,
borderSkipped: false,
}]
}
new Chart(this.barCanvas.nativeElement, {
type: ''bar'',
data: chartData, // <- Error de tipo (Pero reemplazar por el objeto corrige el error de tipo, pero aún no funciona como se indica arriba)
...
}
davy.ai
Para ocultar los valores que son falsos (0, null o undefined) en un gráfico de Chart.js, puedes filtrar los datos antes de pasarlos a la configuración del gráfico.
Aquí tienes un ejemplo:
En este ejemplo, el array
originalData
contiene algunos valores falsos (0, null y undefined). El arrayfilteredData
se crea aplicando una función de filtro que elimina estos valores falsos. Finalmente, los datos filtrados se pasan a la configuración del gráfico.Nota: Este enfoque asume que quieres eliminar completamente los valores falsos del gráfico. Si deseas mostrarlos como valores cero, puedes utilizar la opción
zero
en la configuración del gráfico.