0

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' }
                }
            }
        }
    });
}

Grafico como el que quiero

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);

El resultado que veo: Como veis, no muestra ningún grafico

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)
3
  • Puede ser que el problema esté en algún error de sintaxi tonto? el 27 mar. a las 13:15
  • Have you fixed this error? As I am facing this error now and unable to investigate the reason. el 1 sep. a las 5:24
  • @ZeeshanAli The truth is that no, it was one thing that was not critical for my application so I left it unfixed. I wish you luck in your search... If you find the solution, upload it to this post please :) el 4 sep. a las 7:51

2 respuestas 2

1

Me parece que te falta registrar el plugin de los label, haciendo:

Chart.register(ChartDataLabels);

Aquí un ejemplo completo:

var ctx_pieces = document.getElementById('myChart2').getContext('2d');
const background_color2 = ['#33a3ec', '#ff6384'];

Chart.register(ChartDataLabels);
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'
            }
        }
    },
    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, 1000);


//SOLO PARA LA DEMO - NO COPIAR LO DE ABAJO
$={};
$.get = (a,f) => f({pieces_nok:generateRandomInteger(0,100), pieces_ok:generateRandomInteger(0,100) });

function generateRandomInteger(min, max) {
  return Math.floor(min + Math.random()*(max - min + 1))
}
#lienzo{
  height: 200px;
  width: 200px;
}
<div id="lienzo">
  <canvas id="myChart2" ></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

3
  • Gracias pero me da el mismo resultado :( el 27 mar. a las 13:14
  • @FAFernández Si tu presionas "ejecutar" verás que funciona perfectamente. Si a ti no te funciona en tu código es que el problema está en otro lado y no en el ChartDataLabels como señalas. Por ejemplo en el AJAX que realizas, coloca con console.log(data) y dime que te arroja
    – Yussef
    el 27 mar. a las 22:12
  • Si le di a ejecutar y funcionó correctamente pero cuando lo importo a mi código hay algo que no le gusta. En el console log veo que los datos se están enviando correctamente, pero me arroja el siguiente error (actualizo el post). el 29 mar. a las 15:34
0

El problema es que estás usando la options dos veces en la definición del gráfico, lo cual no es correcto. La segunda vez que usas options para agregar plugins, estás sobrescribiendo la configuración de options anterior y eliminando el plugin ChartDataLabels. Para solucionar esto, simplemente debes combinar las opciones de ChartDataLabels en un solo objeto "options"

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'
            },
            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);

Con esto, el plugin ChartDataLabels se agregará correctamente y deberías poder ver los valores dentro del gráfico actualizado cada 5 segundos.

1
  • Jefferson, gracias por tu tiempo, pero tu solución me arroja el mismo problema :(. Me estoy dejando algo? el 27 mar. a las 7:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.