我正在尝试通过Chartjs中范围滑块的用户输入来绘制图形(PV和FV计算)。我的问题是用户移动滑块时图形不会更新。我不确定应该将.update()放在哪里,以便在用户每次更改任何滑块时都绘制一个全新的图。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2.2.0/src/js.cookie.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/parse-url-query@1.0.1/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/query-parse@2.0.0/index.min.js"></script>
<meta charset="utf-8">
<title>Projection | Investify</title>
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Open+Sans:400,600">
<link rel="stylesheet" type="text/css" href="https://www.investify.co.za/dope.css"/>
</head>
<body>
<form class="pure-form pure-form-aligned">
<fieldset>
<legend>FV = (PV/r) × [(1 + r)<sup>n</sup>-1]
</legend>
<p>FV(future value) is equal to PV(present value) times 1 plus the interest rate raised to the number of years the investment is compounded</p>
<div id="compoundMessage" style="display:none;"></div>
<div class="pure-control-group">
<label for="pv">PMT (R)</label>
<!-- <input type="text" id="pv" size="5" /> -->
<input type="range" id="pv" min="100" max="10000" onchange="graph()" value="10000" step="100" /> <span id="demo2"></span>
</div>
<div class="pure-control-group">
<label for="r">Rate</label>
<input type="range" id="r" min="1" max="10" onclick = "graph()" value="5" /><span id="demo"></span> %
</div>
<div class="pure-control-group">
<label for="n">Year</label>
<input type="range" id="n" min="2019" max="2050" onclick = "graph()" value="2020" /><span id="demo3"></span>
<!-- <input type="text" id="n" size="4" step="1" /> -->
</div>
<div class="pure-controls">
<input type="button" value="Calculate" id="calculate" class="pure-button pure-button-primary" />
<input type="button" value="Plot" id="plot" onclick = "graph()" class="pure-button pure-button-primary" />
</div>
</fieldset>
<p id="output"></p>
</form>
<!--<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> -->
<canvas id="container" width="90%" height="100%"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script>
var slider2 = document.getElementById("r");
var output = document.getElementById("demo");
output.innerHTML = slider2.value;
slider2.oninput = function() {
output.innerHTML = document.getElementById("r").value;
}
var slider2 = document.getElementById("pv");
var output1 = document.getElementById("demo2");
output1.innerHTML = slider2.value;
slider2.oninput = function() {
output1.innerHTML = document.getElementById("pv").value;
}
var slider3 = document.getElementById("n");
var output2 = document.getElementById("demo3");
output2.innerHTML = slider3.value;
slider3.oninput = function() {
output2.innerHTML = document.getElementById("n").value;
}
Chart.defaults.global.defaultFontSize = 20;
var ctx = document.getElementById("container");
var pmt = document.getElementById("pv").value;
var r = document.getElementById("r").value;
var n2 = document.getElementById("n").value;
var n1 = 2018;
var arr = [];
for (var i=n1; i<=n2; i++){
arr.push (i);
};
console.log(arr);
var data = {
labels: arr,
datasets: [{
label: "Projection",
function: function(x) { return (pmt/r)*(((1+r)**(x - data.labels[0]))-1) },
borderColor: "rgba(75, 192, 192, 1)",
data: [],
fill: true
}]
};
Chart.pluginService.register({
beforeInit: function(chart) {
var data = chart.config.data;
for (var i = 0; i < data.datasets.length; i++) {
for (var j = 0; j < data.labels.length; j++) {
var fct = data.datasets[i].function,
x = data.labels[j],
y = fct(x);
data.datasets[i].data.push(y);
}
}
}
});
function graph(){
var myBarChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
};
</script>
<script>
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var url_string = window.location.href;
var url = new URL(url_string);
var c = url.searchParams.get("ref");
var user=getCookie("ref");
if (user == "") {
getCookie("ref");
}
}
</script>
<button class="button" name="like" id="like" value="Like" ><span>Invest Now </span></button>
<script>
$('#like').click(function(){
var url_string = window.location.href;
var url = new URL(url_string);
var c = url.searchParams.get("ref");
var user=getCookie("ref");
//var user="454";
var combinat = { user: c, password: user };
var combinator = JSON.stringify({ 'user': c });
if (c!=null){
$.post('https://untitled-jt7mqnhbqkdw.runkit.sh/',combinat);
}
});
</script>
</body>
<!--'https://untitled-d8k5hn12154r.runkit.sh/'
//https://eaa481f5-aa63-4fc7-9601-e4ee3a1f9b2c.mock.pstmn.io -->
</html>