更新關於HTML表格值更改的highcharts數據

我已經開始學習編碼並嘗試創建貸款/抵押計算器作爲我學習的一部分。我試圖進一步利用Highcharts繪製結果，但無法按照我的想法進行工作。更新關於HTML表格值更改的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); 
}); 


});

來源

2017-06-02 auley_code

有計算不正確的值，這導致在形成圖表不正確。其實你必須調用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 demo

來源

2017-06-03 06:29:49

太好了，謝謝 –

更新關於HTML表格值更改的highcharts數據

回答

相關問題