Как вывести график функции JS при нажатии на кнопку?

Question

[Vikt1006]

Константы вводятся через окно формы. По ним в цикле рассчитываются значения функции и выводятся на экран. Также должен быть выведен график по этим значениям, но он не показывается.

<p>Введите константу k1</p>
    <p><input id="k1" type='number' /></p>
    <p>Введите константу k2</p>
    <p><input id="k2" type='number' /></p>
    <p><button onclick="getk1k2(); functionA1();  Diagram()">рассчитать</button></p>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <div id="content" align="center">
    <canvas id="myChart" width="628" height="400"></canvas></div>

let k1; let k2; let a1; 
      const massivOfResults1=[];
      
      function getk1k2() {
      k1 = document.getElementById("k1").value; 
      k1= parseFloat(k1);
      k2 = document.getElementById("k2").value; 
      k2= parseFloat(k2); 
      return k1, k2;
      }
    
        function functionA1() {
            for (let i=0; i<=10; i++) {
                  a1=k1*i/(k1*k2+k1*i+i*i); 
                  document.write('  ' + i + ')  a1 при i равно '+ i + ' = '+ a1 + ';');                                               
            massivOfResults1[i]=a1;
           }
           return a1, massivOfResults1;  
        }
       
         function Diagram() {
         var ctx = document.getElementById("myChart");
         var myChart = new Chart (ctx, {
          type: 'line',
          data: {
           labels: [], 
           datasets: [
            {
             label: 'f(x)', 
             data: [massivOfResults1[0],massivOfResults1[1], massivOfResults1[2], massivOfResults1[3], massivOfResults1[4], massivOfResults1[5], massivOfResults1[6], massivOfResults1[7], massivOfResults1[8], massivOfResults1[9], massivOfResults1[10] ], 
             borderColor: 'blue', 
             borderWidth: 2, 
             fill: false 
            }
            //
           ]
          },
          options: {
           responsive: false, 
           scales: {
            xAxes: [{
             display: true
            }],
            yAxes: [{
             display: true
            }]
           }
          }
         });
           }

Comments

[WbICHA]

data: [massivOfResults1[0],massivOfResults1[1], massivOfResults1[2], massivOfResults1[3], massivOfResults1[4], massivOfResults1[5], massivOfResults1[6], massivOfResults1[7], massivOfResults1[8], massivOfResults1[9], massivOfResults1[10] ],

Не могу не отметить, что это шедевр.

[ksnk]

Попробуй убрать document.write из скрипта. Используй console.log вместо этой конструкции. Ну и параметры передавать не таким странным образом, а просто массив. Если Chart.js подключен, то все должно работать. https://codepen.io/ksnk/pen/poQGegJ

[Vikt1006]

ksnk, спасибо, всё работает.