Изменение значений в радиолокационной карте chart.js на основе пользовательского ввода - PullRequest
Новая
       28

Изменение значений в радиолокационной карте chart.js на основе пользовательского ввода

0 голосов
/ 06 февраля 2019

У меня есть карта радара 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>

1 Ответ

0 голосов
/ 06 февраля 2019

Вы пытались установить прослушиватели событий 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

...