Моя диаграмма не будет обновлена ​​в реальном времени - сделано в Chart.js и Java Script - PullRequest
Новая
       5

Моя диаграмма не будет обновлена ​​в реальном времени - сделано в Chart.js и Java Script

0 голосов
/ 16 января 2019

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

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3   /Chart.js">

  </script>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>

 <h2>Weight Tracker</h2>
 <input type="number" name="" value="" id="kg">
 <input type="date" name="" value="" id="dt">
 <button type="button" name="button" onclick="adauga()">Adauga</button>
 <canvas id="line-chart" width="200" height="100"></canvas>

<script>
var dt2 = [];
function adauga() {
 var kg = document.getElementById('kg').value;
  //alert(kg);
 var dt = document.getElementById('dt').value;

 dt2.push(dt);

  }

var data = [80,78,80,82,77,79,76,75];

new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
  labels: dt2,
  datasets: [{
      data: kg,
      label: "Asia",
      borderColor: "#8e5ea2",
      fill: false
    }
  ]
},
options: {
  title: {
    display: true,
    text: 'World population per region (in millions)'
  }
}
 });

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

addData(Chart, dt2, kg);

Я хочу обновить график, когда нажимаю кнопку

1 Ответ

0 голосов
/ 17 января 2019

Похоже, вы пытались копировать и вставлять разные коды, не понимая этого:

  • функция adauga добавляет входные значения в массив dt2, но затем не указывает диаграмме обновляться.
  • функция addData, которая успешно обновит диаграмму, вызывается только один раз и с неверными переменными (Chart - это глобальный Chart.js; kg - это undefined, поскольку он локально ограничен функцией adauga).

Я переписал ваш код в фрагмент ниже. См. Аннотации кода для получения дополнительной информации. 

// assign the return value from Chart() to a variable which we use for updating.
let chart = new Chart(document.getElementById('line-chart'), {
  type: 'line',
  data: {
    datasets: [{
      data: [],
      label: 'Asia',
      borderColor: '#8e5ea2',
      fill: false
    }]
  },
  options: {
    scales: {
      xAxes: [{
        // configure the x-axis as a time axis (this causes Chart.js to place the
        // values in chronological order).
        type: 'time',
        time: {
          unit: 'day'
        }
      }]
    },
    title: {
      display: true,
      text: 'World population per region (in millions)'
    }
  }
});

// bind to the click event of the button element.
document.getElementById('adauga').addEventListener('click', function() {
  let dt = document.getElementById('dt').value,
    kg = parseInt(document.getElementById('kg').value); // Chart.js requires a number not a string!

  if (dt && (kg || kg == 0)) { // basic validity check.
    // add the datapoint using the object format.
    // see: https://www.chartjs.org/docs/latest/axes/cartesian/time.html#input-data
    chart.data.datasets[0].data.push({
      x: dt,
      y: kg
    });
    chart.update();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<input type="number" name="" value="" id="kg">
<input type="date" name="" value="" id="dt">
<button type="button" name="button" id="adauga">Adauga</button>
<canvas id="line-chart" width="200" height="100"></canvas>
...