es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

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,
}

...

chartjs bar

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)
...
}
Tags:  , ,

Answer

  1. Avatar for 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:

    const originalData = [1, 2, 0, null, 3, undefined, 4];
    
    const filteredData = originalData.filter((value) =>
      value !== null && value !== undefined && value !== 0
    );
    
    new Chart(canvas, {
      type: 'bar',
      data: {
        labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
        datasets: [
          {
            label: 'Data',
            data: filteredData,
          },
        ],
      },
    });
    

    En este ejemplo, el array originalData contiene algunos valores falsos (0, null y undefined). El array filteredData 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.

Comments are closed.