Javascript 根据用户输入修改radar chart.js中的值

我有一张chart.js雷达图，还有一些输入字段。我想根据用户输入更改图形中的值和点。我更喜欢在用户键入值时更新图表

但另一种方法是通过单击“更新”按钮来更新图表

在用户键入输入时更新图形的最佳方法是什么

点击更新按钮更新图表的最佳方式是什么

您可以在此处查看我的代码：

以下是我的代码的重要部分：

      <table id="editable_table" class="table table-striped table-sm">
        <thead>
          <tr>
            <th class='th' id=0>Skill</th>
            <th class='th' id=1>Departmental Average</th>
            <th class='th' id=2>Employee</th>
          </tr>
        </thead>
     <tbody id="tableData">
        <tr>
            <td>
            Skill 1
            </td>
            <td>
                <input type="number" class="form-control" id="depAverage1" placeholder="">
            </td>
            <td>
                <input type="number" class="form-control" id="employee1" placeholder="">
            </td>
            <td>
                <button class="btn btn-primary btn-sm">Update</button>
            </td>
        </tr>
        .
        .
        .
        .
        <tr>
            <td>
            Skill 7
            </td>
            <td>
                <input type="number" class="form-control" id="depAverage7" placeholder="">
            </td>
            <td>
                <input type="number" class="form-control" id="employee7" placeholder="">
            </td>
            <td>
                <button class="btn btn-primary btn-sm">Update</button>
            </td>
        </tr>
     </tbody>
    </table>
         <button class="btn btn-primary btn-lg pull-right">SAVE</button>
    </div>
    <div class=col-md-5>
        <canvas id="myChart"></canvas>
    </div>
   </div>
  </div>

</body>
</html>


<script>
var depAverage1 = document.getElementById("depAverage1").value;
.
.
.
var depAverage7 = document.getElementById("depAverage7").value;


var employee1 = document.getElementById("depAverage1").value;
.
.
.
var employee7 = document.getElementById("depAverage7").value;

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            .
            .
            .
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

---

您是否尝试过将onChange事件侦听器放在每个输入中，然后以输入的值为目标

<input id='user-input' onchange='checkInput()' />

checkInput = () => {
    let input = document.getElementById('user-input').value;

    updateChart(input);
}

我觉得这样做会奏效的。查看监视用户输入的事件侦听器