0
284
Visualizações¿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 Respostas
Responde à pergunta0
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
Relatório
Responde à pergunta