基于用户输入在一个雷达chart.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