Chart.js 问题 - 看不到图表中的值

Question

我正在制作一个 Flask 应用程序来通过网络可视化一些数据。为此，我使用 Chart.js 让用户以圆环图或条形图查看数据。问题是，我希望图表也能显示它们内部的值，所以我使用 ChartDataLabels。我的问题是，如果我按以下方式将图形放在一个函数中，我会看到一个像我想要表示的图形，其值在同一个图形中（不要太在意值因为它们完全是错误的）：

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

但是相反，如果我修改它们以便它们每 x 次更新一次数据，我什么也看不到，它向我显示以下错误：Uncaught TypeError: Cannot read properties of null (reading 'x')

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'
            }
        }
    },
    /*
     * Problem is her.
     * If I comment this lines, the graph
     * shows correctly but without the value labels.
     */
    plugins: [ChartDataLabels],
    options: {
        plugins: {
            datalabels: {
                color: 'black',
                font: { weight: 'bold', size: '14px' }
            }
        }
    }
});

/* Function to update the graph periodically. */
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();
    });
}

/* Update chart every 5 seconds. */
setInterval(actualizarGrafico, 5000);

我看到的结果。如您所见，它没有显示任何图表：

有人遇到过这个问题吗？我该如何解决？

谢谢，抱歉打扰了）

完整的控制台错误（通过控制台我看到数据发送正确，但它抛出以下错误）：

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)