Javascript Chart.js：奇怪的视觉效果出现在左上角？

画布中图表图像的左上角出现了一个奇怪的视觉效果，看起来像是被画布截断的字符串。

无论画布大小或用于打开HTML文件的浏览器如何，这都会保持不变

我也记不起这个视频是什么时候开始出现的，我试图通过删除部分代码来修复它，以查看它是什么时候开始出现的，但目前没有效果。 如果有人能找到解决这个问题的办法，我将感谢你的帮助

我当前的代码： Javascript代码：

const offset = 27;
var myChart = new Chart(document.getElementById('Chart'), {
type: 'bar',
plugins: [{
    afterUpdate: function(chart) {
        var dataset = chart.config.data.datasets[1];
        for (var i = 0; i < dataset._meta[0].data.length; i++) {
            var model = dataset._meta[0].data[i]._model;
            model.x += offset;
            model.controlPointNextX += offset;
            model.controlPointPreviousX += offset;
        }
        var dataset = chart.config.data.datasets[2];
        for (var i = 0; i < dataset._meta[0].data.length; i++) {
            var model = dataset._meta[0].data[i]._model;
            model.x += offset;
            model.controlPointNextX += offset;
            model.controlPointPreviousX += offset;
        }
    },
}],
data: {
    labels: ['Black', 'Red','Cyan',
             'Blue', 'Orange', 'Purple',
             'Green','Grey', 'Other'],
    datasets: [{
        label: 'Result now',
        data: [18.4, 34.9, 6.1, 9.8,15.3,3.6,4.3,5.7,1.9],
        backgroundColor: [
            '#000000',
            '#fa0000',
            '#09fae0',
            '#0011ff',
            '#ff7300',
            '#d400db',
            '#00ff09',
            '#666666',
            '#bababa'
        ],
        categoryPercentage: 1.0,
        barPercentage: 0.45,
        xAxisID: "Now",
        datalabels: {
            color: 'rgba(0,0,0,1)',
            anchor: 'end',
            align: 'top'
        },
    },
    {
        //Previous Election | Current Result highter
        label: 'Last Result',
        data: [, 20.1, , , 8.9,,3.4, ,1.5],
        backgroundColor: [
            'rgba(0, 0, 0, 0.4)',
            'rgba(250, 0, 0, 0.4)',
            'rgba(9, 250, 224, 0.4)',
            'rgba(0, 17, 255, 0.4)',
            'rgba(255, 115, 0, 0.4)',
            'rgba(212, 0, 219, 0.4)',
            'rgba(0, 255, 9, 0.4)',
            'rgba(102, 102, 102, 0.4)',
            'rgba(186, 186, 186, 0.4)'
        ],
        categoryPercentage: 1.0,
        barPercentage: 0.3,
        xAxisID: "Then",
        datalabels: {
            color: 'rgba(0,0,0,0.7)',
            anchor: 'end',
            align: '-50'
        },
    },
    {
        //Previous Election | Current Bars lower
        label: 'Last Result',
        data: [25.7, ,16.4 ,16.1 , ,4.7,, ,],
        backgroundColor: [
            'rgba(0, 0, 0, 0.4)',
            'rgba(250, 0, 0, 0.4)',
            'rgba(9, 250, 224, 0.4)',
            'rgba(0, 17, 255, 0.4)',
            'rgba(255, 115, 0, 0.4)',
            'rgba(212, 0, 219, 0.4)',
            'rgba(0, 255, 9, 0.4)',
            'rgba(102, 102, 102, 0.4)',
            'rgba(186, 186, 186, 0.4)'
        ],
        categoryPercentage: 1.0,
        barPercentage: 0.3,
        xAxisID: "Then_2",
        datalabels: {
            color: 'rgba(0,0,0,0.7)',
            anchor: 'end',
            align: 'end'
        }
    }]
},
options: {
    responsive: false,
    legend: {
        display: false,
        onClick: false,
    },
    scales: {
        xAxes: [{
            id: "Now",
            gridLines: {
                display: false
            },
            ticks: {
                fontColor: 'rgba(0,0,0,1)'
            }
        },
        {
            id: "Then",
            offset: true,
            display: false
        },
        {
            id: "Then_2",
            offset: true,
            display: false
        },
        ],
        yAxes: [{
            ticks: {
                min: 0,
                max: 50,
                stepSize: 10,
                fontColor: 'rgba(0,0,0,1)',
                callback: function(value, index, values) {
                    return value + '%';
                }
            },
            gridLines: {
                display: true,
                color: 'rgba(0,0,0,0.3)',
            },
            scaleLabel :{
                display: true,
                labelString: "Vote Share",
                fontColor: 'rgba(0,0,0,1)'
            }
        }]
    },
    plugins: {
        datalabels: {
            formatter: function(value, context) {
                return value + '%';
            },
        }
    },
}
});

const offset=27；
var myChart=新图表（document.getElementById（'Chart'）{
类型：'bar'，
插件：[{
更新后：功能（图表）{
VarDataSet=chart.config.data.datasets[1]；
对于（var i=0；i

Html代码：

图表测试


结果

我知道有点晚了，也有同样的问题，我为我的问题找到了一个解决方案，也许它也能对你起作用

问题是我的数据，如果数据为空而不是“0”，则会使图表显示为NaN，即显示在左上角的剪切文本

在我看来，你应该取代：

data: [, 20.1, , , 8.9,,3.4, ,1.5],

借

希望它能解决你的问题！：）

data: [0, 20.1, 0, 0, 8.9,0,3.4,0,1.5],