Question

我是一个初学者，我创建了一个带有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);

当我单击按钮时，我希望图表实时更新

Answer 1

您似乎在没有真正理解的情况下尝试将不同的代码复制并粘贴到一起：

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

我的图表不会实时更新-用Chart.js和Java脚本完成

1 个答案: