当将数据推送到图表时，Chartjs显示错误

Question

我的朋友和我的chartjs有问题。我们创建了一个应用来跟踪您的财务状况。我们希望将数据推送到图，但是在第三次输入之后，尽管创建了三个点，但该图仅显示两个数据点。这是屏幕截图和代码。你能帮我们吗？谢谢。

Chartjs displays only the datapoint before

Console shows 400

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'
				}
			}]
		}
	}
};
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");
		window.myLine.data.datasets[0].data.push(store.get('dataSchema'));
		window.myLine.update();
	}
};

function addDataGraph() {
	let Betrag = $('#inputBetrag').val();
	let Konto = $('#inputKonto').val();
	let Beschreibung = $('#inputBeschreibung').val();
	var betragArray = [Betrag];
	var kontoArray = [Konto];
	var beschreibungArray = [Beschreibung];
	var dataPointArray = beschreibungArray.concat(kontoArray);
	var sortDateArray = [aktuellesDatum].sort(dateFns.compareAsc);
	var dateArray = [sortDateArray];
	var ArrayLength0;
	var ArrayLength1;
	if(myLine.data.datasets[0].data.length == 0) {
		console.log("Dataset not found");
		myLine.data.datasets[0].data.push(Betrag);
		store.set('dataSchema', Betrag);
	} else {
		console.log("--------------");
		console.log(store.get('dataSchema'));
		console.log("--------------");
		//=> 50
		console.log("Dataset found");
		if(Konto === 'Postbank') {
			console.log('Postbank');
			var BetragBerechnen = JSON.parse(store.get('dataSchema')) + JSON.parse(Betrag);
			console.log(BetragBerechnen);
			myLine.data.datasets[0].data.push(BetragBerechnen);
			// myLine.data.datasets[0].label = 'Postbank';
			myLine.data.labels.push(dateArray);
			store.set('dataSchema', BetragBerechnen);
		}
	}
	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>

Answer 1

app.compontent.html

<canvas id="line-chart" style="width: 100%; height:250px;"></canvas>

app.component.ts

import { Chart } from 'chart.js';
  chart: any = '';
  ngOnInit() {
 this.chart = new Chart('line-chart', {
      type: 'line',
      data: {
        labels: ["JAN 05", "JAN 06", "JAN 07", "JAN 08", "JAN 10", "JAN 12", "JAN 15", "JAN 20", "JAN 21", "JAN 22", "JAN 23", "JAN 24"],
        datasets: [
          {
            data: [10, 12, 15, 12, 18, 12, 10, 12, 17, 12, 12, 20],
            label: "Africa",
            borderColor: "#3e95cd",
            fill: false
          }
        ]
      },
      options: {
        scales: {
          yAxes: [{
            display: false //this will remove all the x-axis grid lines
          }],
          xAxes: [{
            gridLines: {
              display: false
            }
          }]
        },
        legend: {
          display: false
        },
        tooltips: {
          callbacks: {
            label: function (tooltipItem) {
              console.log(tooltipItem)
              return tooltipItem.yLabel;
            }
          }

        }
      }
    });
}