画布中图表图像的左上角出现了一个奇怪的Visual，看起来像是被画布截断的字符串。可见图像
无论画布大小或用于打开HTML文件的浏览器如何，它都会保持不变。
我也记不起这个Visual是什么时候开始出现的，我试图通过删除部分代码来修复它，看看它何时开始出现，但目前没有效果。如果有人能找到解决这个问题的方法，我将感谢你的帮助。
我当前的代码：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;
}
我知道时间有点晚了，遇到了同样的问题，我找到了我的解决方案，也许它也适用于你。
问题是我的数据，有空的数据而不是"；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],
希望它能解决你的问题！：(