Estoy haciendo una aplicación Flask para visualizar unos datos a través de una web. Para esto, uso Chart.js para que el usuario vea los datos en gráficos de tipo dona o barra. El caso es que me gustaría que los gráficos también mostrarán los valores que tienen dentro de ellos, por lo que uso ChartDataLabels. Mi problema és que si yo pongo los gráficos en una función de la siguiente forma, veo un gráfico cómo el que quiero representar, con sus valores dentro del mismo gráfico (no hagan mucho caso de los valores porque son totalmente falsos):
function chartOEE(valors) {
const ctx = document.getElementById('myChart');
const background_color = ['#33a3ec', '#ffce55', '#4ac1c1', '#ff00ff00'];
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Availability', 'Performance', 'Quality'],
datasets: [{
data: valors,
backgroundColor: background_color,
borderWidth: 10,
borderColor: "#fbfbfb"
}]
},
options: {
scales: {
display: false
},
animation: {
duration: 1000,
animateRotate: true,
render: false
},
plugins: {
title: {
display: true,
text: "Pieces fabricated"
},
legend: {
display: true,
position: 'bottom'
}
}
},
plugins: [ChartDataLabels],
options: {
plugins: {
datalabels: {
color: ['black', 'black', 'black', 'white'],
font: { weight: 'bold', size: '14px' }
}
}
}
});
}
Pero en cambio, si los modifico para que me actualicen los datos cada x tiempo, no veo nada y me muestra el siguiente error: Uncaught TypeError: Cannot read properties of null (reading 'x')
var ctx_pieces = document.getElementById('myChart2').getContext('2d');
const background_color2 = ['#33a3ec', '#ff6384'];
var chart_pieces = new Chart(ctx_pieces, {
type: 'doughnut',
data: {
labels: ['OK', 'NOK'],
datasets: [{
data: [0, 0],
backgroundColor: background_color2,
borderWidth: 10,
borderColor: "#fbfbfb"
}]
},
options: {
scales: {
display: false
},
animation: {
duration: 1000,
animateRotate: true,
render: false
},
plugins: {
title: {
display: true,
text: "Pieces fabricated"
},
legend: {
display: true,
position: 'bottom'
}
}
},
/* El probelma está aquí. Si comento estas lineas
el grafico se ve bien.*/
plugins: [ChartDataLabels],
options: {
plugins: {
datalabels: {
color: 'black',
font: { weight: 'bold', size: '14px' }
}
}
}
});
// Función para actualizar el gráfico con los valores de los sensores
function actualizarGrafico() {
$.get('/pieces', function(data) {
chart_pieces.data.datasets[0].data[1] = data.pieces_nok;
chart_pieces.data.datasets[0].data[0] = data.pieces_ok;
chart_pieces.update();
});
}
// Actualizar el gráfico cada 5 segundos
setInterval(actualizarGrafico, 5000);
Alguien se ha peleado con esto? Cómo lo solucionó? Gracias y perdón por las molestias )
ACTUALIZO EL POST Mediante la consola veo que los datos se envian correctamente, pero me arroja el siguiente error:
Uncaught TypeError: Cannot read properties of null (reading 'x')
at l (chartjs-plugin-datalabels.min.js:7:1172)
at Object.f [as positioner] (chartjs-plugin-datalabels.min.js:7:2773)
at $ (chartjs-plugin-datalabels.min.js:7:7328)
at Object.draw (chartjs-plugin-datalabels.min.js:7:9562)
at Object.afterDatasetsDraw (chartjs-plugin-datalabels.min.js:7:12091)
at d (chart.js:13:1113)
at Qs._notify (chart.js:19:82747)
at Qs.notify (chart.js:19:82568)
at wn.notifyPlugins (chart.js:19:101170)
at wn._drawDatasets (chart.js:19:97064)