Ошибка отображения Chartjs при отправке данных на график

Question

У меня и моего друга проблема с чарджисом.Мы создали приложение для отслеживания вашего финансового состояния.Мы хотели перенести данные на график, но после третьей записи на графике отображаются только две точки данных, даже если на графике создаются три точки.Вот скриншоты и код.Можешь помочь нам?Спасибо.

Chartjs отображает только точку данных до

Консоль показывает 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;
            }
          }

        }
      }
    });
}