입력을 php에서 선택된 옵션의 값으로 곱하고 jQuery 차트에 표시하는 방법은 무엇입니까?

Question

페이지를 다시로드하지 않고 PHP를 사용하여 동일한 양식의 두 작업을 수행하고 결과를 차트에 표시하십시오. 차트에 canvasjs를 사용하고 있습니다. 첫 번째는 입력 값에 선택한 옵션의 값을 곱하는 것입니다. 두 번째는 같지만 4 %를 추가합니다.

<?php 
    if(isset($_POST['calculate'])) { 
    $a= $_POST['a']; 
    $b= $_POST['b']; 
    $result1= $a * $b; 
    $result2= $a * $b + '4%'; 
?> 
<form method="post"> 
    <input type="text" name="a" id="a"> 
    <select name="b" id="b"> 
    <option value="" disable selected>Select an amount</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    </select> 
    <button type="submit" id="calculate" value="Calculate"> 
</form> 
<script type="text/javascript"> 
    window.onload = function() { 
     var chart = new CanvasJS.Chart("chartContainer", { 
      title: { 
       text: "Results" 
      }, 
      data: [{ 
       type: "column", 
       dataPoints: [ 
        { y: <?php echo $result1; ?>, label: "Result 1" }, 
        { y: <?php echo $result2; ?>, label: "Result 2" }, 
       ] 
      }] 
     }); 
     chart.render(); 
    } 
</script> 

양식 및 차트를 변경하지 않고 다른 솔루션을 사용해도됩니다.

Answer 1

왜 PHP에서 데이터를 곱해야하는지 간단하게 jquery onchange event에서 수행하고 js 페이지의 데이터 var x = (100 + 50) * a;을 계산할 수 있습니다. 그것은 선택 상자 데이터 변경에 대해 훨씬 간단하고 더 좋습니다.

Answer 2

자바 스크립트 이벤트 리스너를 사용하면 요구 사항을 충족시킬 수 있습니다. 창로드 내에 다음 행을 추가하면 잘 작동해야합니다.

var input = <?php echo $a?>; 

var selector = document.getElementById('b'); 
document.getElementById("calculate").addEventListener("click", function(){ 
    var multiplicationFactor = selector.options[selector.selectedIndex].value; 
    chart.options.data[0].dataPoints[0].y = input * multiplicationFactor; 
    chart.options.data[0].dataPoints[1].y = input * multiplicationFactor * 1.04; 
    chart.render(); 
});