Как передать переменную в набор данных для графика в диаграмме. js? - PullRequest
Новая
       7

Как передать переменную в набор данных для графика в диаграмме. js?

0 голосов
/ 03 августа 2020

Я пытаюсь создать график на диаграмме. js частично с использованием значений данных, которые являются c и заданы в коде, но также частично с использованием значений данных, предоставленных пользователем. Значение переменной может быть изменено, поскольку оно представляет собой сумму различных проанализированных входных данных от пользователя, и я бы хотел, чтобы диаграмма могла обновляться в реальном времени в зависимости от изменения суммы.

Я понимаю, что приведенный ниже код возвращает ошибку, потому что переменная classaverage не определена, а также понимаю, что можно просто повторить вызов имен классов и снова выполнить вычисления под функцией Chart(). Но поскольку фактическая таблица на самом деле намного больше, чем таблица в образце, я бы предпочел использовать более короткий метод и не занимать все это пространство. Возможно ли это?

Мой код: 

document.getElementById("jack").contentEditable = true;
document.getElementById("john").contentEditable = true;
document.getElementById("joe").contentEditable = true;

function myFunction() {
  var jack2 = document.getElementById("jack").innerText;
  var john2 = document.getElementById("john").innerText;
  var joe2 = document.getElementById("joe").innerText;

  var total2 = (parseInt(jack2) || 0) + (parseInt(john2) || 0) + (parseInt(joe2) || 0);

  document.getElementById("total").innerHTML = total2;
}

var ctx = document.getElementById('totalchart').getContext('2d');

var chart = new Chart(ctx, {
  type: 'bar',

  data: {
    labels: ['Class', 'City', 'District'],
    datasets: [{
      label: 'Average Weight',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [classaverage, 130, 135]
    }]
  },

  options: {
    scales: {
      yAxes: [{
        display: true,
        ticks: {
          beginAtZero: true,
          min: 0,
          max: 200,
        }
      }]
    }
  }
});
table,
tr,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  font-style: Arial;
}
<table>
  <tr class="cell">
    <th>Person</th>
    <th>Weight</th>
  </tr>
  <tr class="cell">
    <td>Jack</td>
    <td id="jack" oninput="myFunction()">120</td>
  </tr>
  <tr class="cell">
    <td>John</td>
    <td id="john" oninput="myFunction()">140</td>
  </tr>
  <tr class="cell">
    <td>Joe</td>
    <td id="joe" oninput="myFunction()">150</td>
  </tr>
  <tr class="cell">
    <td>Total</td>
    <td id="total"></td>
  </tr>
</table>

<canvas id="totalchart"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

1 Ответ

0 голосов
/ 04 августа 2020

Я не совсем уверен, чего вы пытаетесь достичь своими расчетами, если вы обновите свой ответ, я смогу показать вам рабочий пример, но для обновления диаграммы в реальном времени вам потребуется addData () : 

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}

и, возможно, removeData (): 

function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}

, если вы не replaceData (): 

function replaceData(chart, data) {
    chart.data.labels = Object.keys(data);
    chart.data.datasets.forEach((dataset) => {
        dataset.data = Object.values(data);
    });
    chart.update();
}

Я создал пример fiddle , где показана реализация addData

, пожалуйста, обратитесь к docs

...