Question

我正在尝试通过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) &times; [(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>

从chartjs中的滑块输入绘制自定义函数

0 个答案: