Chart.js数据推送显示Bug求助：添加第三条数据后仅展示两个数据点

先梳理下你遇到的两个核心问题：图表数据点显示不全、控制台400错误（注：400错误从你贴的代码里没看到直接触发点，大概率来自页面未贴出的其他请求，先聚焦Chart.js的显示问题）

1. 图表只显示部分数据点的根本原因 #

你的代码里存在labels与data数组长度不匹配、labels格式错误两个关键问题：

• labels格式错误：在addDataGraph中，你构建的dateArray是二维数组（[[aktuellesDatum]]），而Chart.js要求labels必须是一维数组（如['2024-05-01', '2024-05-02']），二维数组会导致Chart.js无法正确解析标签，进而忽略对应的数据点。
• labels与data长度不一致：
  • 页面初始化时，你只给datasets[0].datapush了数据，但没有给labels添加对应的日期；
  • 只有当Konto === 'Postbank'时才会push labels，其他情况下data增加但labels没同步，最终导致data数组长度大于labels，Chart.js会自动丢弃没有对应标签的数据点。

2. 代码修复细节 #

修复labels格式与同步问题 #

• 把dateArray改为一维数组，去掉多余的嵌套；
• 每次添加data时，确保labels同步添加日期，不管Konto是否为Postbank；
• 初始化时也要给labels添加对应的初始日期（如果有初始数据的话）。

修复存储与数据累加的潜在问题 #

• 初始存储dataSchema时，确保是数值类型，避免后续JSON解析出错；
• 处理输入的Betrag时，先做非空和数值校验，防止NaN导致图表异常。

修正后的完整代码 #

var config = {
	type: 'line',
	data: {
		labels: [],
		datasets: [{
			label: $('#idDropdownKonto option')[0].innerText,
			backgroundColor: 'rgb(0, 87, 255)',
			borderColor: 'rgb(0, 87, 255)',
			data: [],
			fill: false
		}, {
			label: $('#idDropdownKonto option')[1].innerText,
			fill: false,
			backgroundColor: 'rgb(0, 255, 133)',
			borderColor: 'rgb(0, 255, 133)',
			data: []
		}]
	},
	options: {
		responsive: true,
		title: {
			display: true,
			text: 'Finanzr Chart'
		},
		tooltips: {
			mode: 'index',
			intersect: true
		},
		hover: {
			mode: 'nearest',
			intersect: true
		},
		scales: {
			xAxes: [{
				display: true,
				scaleLabel: {
					display: true,
					labelString: 'Datum'
				}
			}],
			yAxes: [{
				display: true,
				scaleLabel: {
					display: true,
					labelString: 'Kontostand'
				}
			}]
		}
	}
};

// 假设aktuellesDatum是全局变量，建议初始化时赋值为标准日期字符串
const aktuellesDatum = new Date().toLocaleDateString();

window.onload = function() {
	var ctx = document.getElementById('myChart').getContext('2d');
	window.myLine = new Chart(ctx, config);
	console.log("------Store--------");
	console.log(store.get('dataSchema'));
	console.log("--------------");
	if(myLine.data.datasets[0].data.length == 0) {
		console.log("STORE DATA");
		const initialValue = store.get('dataSchema');
		if (initialValue) {
			// 初始化时同步添加data和对应的label
			window.myLine.data.datasets[0].data.push(Number(initialValue));
			window.myLine.data.labels.push(aktuellesDatum);
			window.myLine.update();
		}
	}
};

function addDataGraph() {
	let Betrag = $('#inputBetrag').val();
	let Konto = $('#inputKonto').val();
	// 校验输入是否为有效数值
	if (!Betrag || isNaN(Number(Betrag))) {
		console.error("请输入有效的金额");
		return;
	}
	const betragNum = Number(Betrag);
	
	if(myLine.data.datasets[0].data.length == 0) {
		console.log("Dataset not found");
		myLine.data.datasets[0].data.push(betragNum);
		myLine.data.labels.push(aktuellesDatum); // 同步添加label
		store.set('dataSchema', betragNum.toString()); // 存储为字符串避免类型问题
	} else {
		console.log("--------------");
		console.log(store.get('dataSchema'));
		console.log("--------------");
		console.log("Dataset found");
		if(Konto === 'Postbank') {
			console.log('Postbank');
			const currentValue = Number(store.get('dataSchema'));
			const BetragBerechnen = currentValue + betragNum;
			console.log(BetragBerechnen);
			myLine.data.datasets[0].data.push(BetragBerechnen);
			myLine.data.labels.push(aktuellesDatum); // 同步添加label
			store.set('dataSchema', BetragBerechnen.toString());
		} else {
			// 如果是其他账户，这里可以补充第二个数据集的处理逻辑
			myLine.data.datasets[1].data.push(betragNum);
			myLine.data.labels.push(aktuellesDatum);
		}
	}
	myLine.update();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<canvas id="myChart" width="400" height="150"></canvas>
<button type="button" class="bg-blue-500 hover:bg-blue-700 text-white rounded-full py-2 px-4 m-2" onclick="addDataGraph()" name="button">Update Graph</button>

关于400错误的说明 #

从你提供的代码中没有看到触发HTTP请求的逻辑，这个400错误大概率来自页面中未贴出的其他AJAX请求（比如表单提交、数据同步接口等）。建议你打开浏览器开发者工具的「网络」面板，查看触发400的请求详情，检查请求参数、URL是否正确。

内容的提问来源于stack exchange，提问作者Mozart409