根据用户输入修改雷达图.js中的值

Question

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

但另一种选择是通过单击"更新"按钮来更新图表。

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

单击"更新"按钮更新图形的最佳方法是什么？

你可以在这里查看我的代码：

https://jsfiddle.net/qsfvy8ze/2/

这也是我代码的重要部分：

<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>

Answer 1

您是否尝试过将onChange事件侦听器放置到每个输入，然后针对输入的值？

<input id='user-input' onchange='checkInput()' />
checkInput = () => {
let input = document.getElementById('user-input').value;
updateChart(input);
}

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

https://www.w3schools.com/jsref/event_onchange.asp

https://www.w3schools.com/jsref/event_oninput.asp