Я пытаюсь, чтобы мой пользовательский ввод из моего калькулятора процентных ставок на javascript сразу входил в набор данных моих chartjs, чтобы график автоматически изменялся и реанимировался с новыми данными.Есть ли способ для меня сделать это?Ниже у меня есть код, который я сейчас использую для графика (это линейный график).Любая обратная связь будет здорово, спасибо.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Graph</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<canvas id="myChart"></canvas>
</div>
<script>
let myChart = document.getElementById('myChart').getContext('2d');
let lineChart = new Chart(myChart, {
type: 'line',
data:{
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
datasets: [{
label: "Population",
fill: false,
lineTension: 0.1,
backgroundColor:[ "rgba(75, 192, 192, 0.4)"],
borderColor: 'rgba(75, 192, 192, 1)',
boarderCapStyle: 'butt',
boarderDash: [],
boarderDashOffset: 0.0,
pointBoarderColor: "rgba(75, 192, 192, 1)",
pointBackgroundColor: "#fff",
pointBoarderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75, 192, 192, 1)",
pointHoverBoarderColor: "rgba(220, 220, 220, 1)",
pointHoverBoarderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data:[
65,
59,
80,
81,
56,
55,
40
]
}]
},
options:{
scales:{
yAxes:[{
ticks:{
beginAtZero: true,
}
}]
}
}
});
</script>
</body>
</html>