0
287
Vistas¿Cómo ocultar / no dibujar barras con valores 0 / nulo / indefinido?
¿Cómo ocultar valores que son falsos? (0, nulo o indefinido)
He intentado hacer algo como
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.
Encontré una publicación similar en SOF sin respuestas ni solución funcional
Inspirándome 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 un error de tipo en los data (copiar más allá del objeto de chartData y pasarlo directamente no genera un error de tipo, pero la vista del gráfico no se carga)
indexToRemove es una matriz de índice basada en datos que están en 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, // <- Type error (But replacing by the object correct the type error but still does not work as said above) ... }
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Puede filtrar sus datos de antemano y usar la notación de objetos junto con ellos:
let initialData = [{ "x": "label1", "y": 9 }, { "x": "label2", "y": 0 }, { "x": "label3", "y": 5 }, { "x": "label4", "y": 10 }, { "x": "label6", "y": null }, { "x": "label7", "y": 3 }, { "x": "label8", "y": undefined } ]; let data = initialData.filter(e => ey); const options = { type: 'bar', data: { datasets: [{ label: '# of Votes', data: data, backgroundColor: 'pink', }] }, options: {} } 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.0/chart.js"></script> </body>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta