我已经开始学习编码并尝试创建贷款/抵押计算器作为我学习的一部分。我尝试更进一步，利用 Highcharts 绘制结果，但无法让它按照我想要的方式工作。
理想情况下，我希望饼图能够使用计算出的新值(即“每月还款”和“仅每月利息”)进行动态更新。
到目前为止，我只能通过单击“计算”按钮来重新绘制它，但是只有在单击该按钮至少两次时它才会使用正确的新值进行更新。
示例:https://codepen.io/sonofauley/pen/rwNLom
<body onload="calculate();">
<form method="POST" name="calc" onsubmit="calculate(); return false;">
<label>Amount</label>
<input type="textbox" id="loan" value="100000"><br>
<label>Years</label>
<input type="textbox" id="years" value="25"><br>
<label>Rate (%)</label>
<input type="textbox" id="rate" value="2.50" onkeyup="calculate"><br>
<input type="submit" value="Calculate" id="btn"><br>
<label>Monthly Repayment</label>
<input type="textbox" id="monthlyRepayment"><br>
<label>Monthly Interest Only</label>
<input type="textbox" id="interest"><br>
<label>Monthly Capital Repayment</label>
<input type="textbox" id="capitalRepayment">
<label>Total Interest</label>
<input type="textbox" id="totalInterest"><br>
</form>
<div id="container" style="height: 300px"></div>
</body>
//the below script is in its own js file "cacl.js"
$(document).on("keyup", calculate());
function calculate() {
var p = document.querySelector("#loan").value;
var years = document.querySelector("#years").value;
var rate = document.querySelector("#rate").value;
var r = rate / 100 / 12;
var n = years * 12;
var m1 = r * Math.pow(1 + r, n);
var m2 = Math.pow(1 + r, n) - 1;
var m = (p * (m1 / m2)).toFixed(2);
var I = ((p - n) / m).toFixed(2);
var ti = m * n - p;
var mr = (m - I).toFixed(2);
document.querySelector("#monthlyRepayment").value = m;
document.querySelector("#interest").value = I;
document.querySelector("#totalInterest").value = ti;
document.querySelector("#capitalRepayment").value = mr;
}
//the below script is in a separate js file "chart.js"
$(function () {
$('#btn').click(function(){
var val1,
val2,
options;
val1 = parseFloat($('input[id=monthlyRepayment]').val());
val2 = parseFloat($('input[id=capitalRepayment]').val());
options = {
series: [{
type: 'pie',
name: 'Browser share',
data: [val1,val2]
}]
};
$('#container').highcharts(options);
});
});
最佳答案
计算的值不正确，导致图表形成不正确。实际上，您必须在按钮单击函数上调用 calculate()
用此替换现有(部分)
$(function() {
$('#btn').click(function() {
calculate();
var val1,
val2,
options;
val1 = parseFloat($('input[id=monthlyRepayment]').val());
val2 = parseFloat($('input[id=capitalRepayment]').val());
options = {
series: [{
type: 'pie',
name: 'Browser share',
data: [{name:"Monthly Repayment",y:val1},{name:"Capital Repayment",y:val2}]
}]
};
$('#container').highcharts(options);
});
});
codepen演示
关于javascript - 根据 HTML 表单值更改动态更新 highcharts 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44337979/