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

Question

canvas内的图表图像左上角出现了一个奇怪的Visual，看起来像是被canvas截断的字符串。 Image of visual appearing

无论 canvas 大小或我用来打开 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 + '%';
            },
        }
    },
}
});

Html代码：

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <title> Chart Test </title>
      <link rel="stylesheet" href="style.css">
</head>

<body>
  <br>
  <script src="chartjs/dist/Chart.bundle.min.js"></script>
  <script src="chartjs/dist/chartjs-plugin-datalabels.js"></script>
  
  <div id="Result">
    <h3>Results</h3>
    <canvas id="Chart" width="1055px" height="705px"></canvas>
    <script type="text/javascript" src="js/Chart_1.js"></script>
  </div>
</body>
<html>

CSS代码：

#Result{
float: center;
width: 1095px;
height: 805px;
text-align: center;
}

Answer 1

我知道有点晚了，遇到了同样的问题，我找到了适合我的修复方法，也许它也适用于你。

问题出在我的数据上，数据为空而不是“0”会使 chartjs 返回 NaN，即左上角显示的剪切文本。

在我看来，你应该替换：

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

来自

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

希望它能解决你的问题！ :)

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

Chart.js: Strange Visual appearing in top left corner?

javascript

charts

chart.js2