饼图数组的用户数字输入

Question

我是 javascript 的初学者，如果问题过于简单，请提前致歉。

我的objective是用户输入两个数字（应该在0到100之间），然后得到这些数字的加权平均值并得到一个饼图，其中加权平均值和补码那。这是我的代码

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);


        var grade_list = [];

        var arrayA = ['foo', 'bar']; 
        var arrayB = []; 


        var form = document.getElementById('form');
            number1 = document.getElementById('number1');
            number2 = document.getElementById('number2');
        form.onsubmit = function() {
           var variable1 = number1.value;
           var variable2 = number2.value;
        };

        arrayB[0]= variable1*0.35+variable2*0.75
        arrayB[1]=100- arrayB[0] ;

          for (var i=0; i<arrayA.length && i<arrayB.length; i++)
        grade_list[i] = [arrayA[i], arrayB[i]];



      function drawChart() {
           var data = new google.visualization.DataTable();
            data.addColumn('string', 'Pacman');
            data.addColumn('number', 'Percentage');
            data.addRows(grade_list);

        var options = {
          legend: 'yes',
          pieSliceText: 'yes',
          pieStartAngle: 135,
          tooltip: { trigger: 'none' },
          slices: {
            0: { color: 'Blue' },
            1: { color: 'Orange' }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('pacman'));
        chart.draw(data, options);
      }


    </script>
  </head>


    <body>

<form id="form">
  <input id="number1" type="number" min="1" name="number">
  <input id="number2" type="number" min="1" name="number">
  <button>Submit</button>
</form>
        <div id="pacman" style="width: 600px; height: 400px;"></div>      
</body>
</html>

提前致谢

Answer 1

工作示例

Note: by default button has a behavior a submit type, so in order to prevent form submit, the type="button" has been specified explicitly.

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(function() {
    document.getElementsByTagName('button')[0].onclick = displayChart;  
});

function displayChart() {

    var grade_list = [];
    var arrayA = ['foo', 'bar'];
    var arrayB = [];

    var number1 = parseFloat(document.getElementById('number1').value);
    var number2 = parseFloat(document.getElementById('number2').value);
    
    arrayB[0] = number1 * 0.35 + number2 * 0.75;
    arrayB[1] = 100 - arrayB[0];

    for (var i = 0; i < arrayA.length && i < arrayB.length; i++)
        grade_list[i] = [arrayA[i], arrayB[i]];

    drawChart(grade_list);       
}


function drawChart(rows) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Pacman');
    data.addColumn('number', 'Percentage');
    data.addRows(rows);

    var options = {
        legend: 'yes',
        pieSliceText: 'yes',
        pieStartAngle: 135,
        tooltip: { trigger: 'none' },
        slices: {
            0: { color: 'Blue' },
            1: { color: 'Orange' }
        }
    };

    var chart = new google.visualization.PieChart(document.getElementById('pacman'));
    chart.draw(data, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<form id="form">
    <input id="number1" type="number" min="1" name="number">
    <input id="number2" type="number" min="1" name="number">
    <button type="button">Submit</button>
</form>
<div id="pacman" style="width: 600px; height: 400px;"></div>

饼图数组的用户数字输入

User numeric input to array for a pie chart

javascript

arrays

google-visualization