js中每秒刷新数据（异步函数）

Question

在下面的代码中，您可以看到异步函数，第一个用于获取一些数据，第二个是使用刚刚获取的数据构建一个图表。它工作得很好，但我想每秒刷新一次数据。我到处都放了 setInterval 但没有任何效果......

代码如下：

chartSet();

const xAxis = [];
const yAxis = [];

async function resetChart() {
  const datas = await fetch(
    "https://canvasjs.com/services/data/datapoints.php"
  );
  const datasJson = await datas.json();
  datasJson.forEach((elt) => {
    xAxis.push(elt[0]);
    yAxis.push(elt[1]);
  });
}

async function chartSet() {
  await resetChart().catch(() => {
    console.warn("Didn't work");
  });
  const ctx = document.getElementById("myChart3").getContext("2d");
  const myChart = new Chart(ctx, {
    type: "line",
    data: {
      labels: xAxis,
      datasets: [
        {
          label: "Random datas",
          data: yAxis,
          backgroundColor: "rgba(255, 99, 132, 0.2)",
          borderColor: "rgba(255, 99, 132, 1)",
          borderWidth: 1,
        },
      ],
    },
    options: {
      scales: {
        yAxes: [
          {
            ticks: {
              beginAtZero: true,
            },
          },
        ],
      },
    },
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
<canvas id="myChart3"></canvas>

感谢您的帮助！

Answer 1

你的 js 有一些问题。试试这个：

setInterval(resetChart, 1000)

const xAxis = [];
const yAxis = [];

async function resetChart() {
  fetch("https://canvasjs.com/services/data/datapoints.php")
    .then(data => data.json(), error => console.warn("Didn't work"))
    .then(dataList => {
      dataList.forEach(elt => {
        xAxis.push(elt[0]);
        yAxis.push(elt[1]);
        chartSet()
      })
    })
}




async function chartSet() {
  const ctx = document.getElementById("myChart3").getContext("2d");
  const myChart = new Chart(ctx, {
    type: "line",
    data: {
      labels: xAxis,
      datasets: [{
        label: "Random datas",
        data: yAxis,
        backgroundColor: "rgba(255, 99, 132, 0.2)",
        borderColor: "rgba(255, 99, 132, 1)",
        borderWidth: 1,
      }, ],
    },
    options: {
      animation: {
        duration: 0
      },
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true,
          },
        }, ],
      },
    },
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
<canvas id="myChart3" style="pointer-events:none"></canvas>

请注意，我必须禁用画布上的指针事件，因为 Chart.js jquery 本身中出现了某种跳过错误。我还禁用了图表动画，因为第一次之后它看起来有点烦人。

Answer 2

工作代码：

chartSet();

let xAxis = [];
let yAxis = [];

let timeout = null;

async function resetChart() {
  const datas = await fetch(
    "https://canvasjs.com/services/data/datapoints.php?" + Math.random()
  );
  const datasJson = await datas.json();
  xAxis = [];
  yAxis = [];
  datasJson.forEach((elt) => {
    xAxis.push(elt[0]);
    yAxis.push(elt[1]);
  });
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    chartSet();
  }, 1000);
}

async function chartSet() {
  await resetChart().catch(() => {
    console.warn("Didn't work");
  });
  const ctx = document.getElementById("myChart3").getContext("2d");
  const myChart = new Chart(ctx, {
    type: "line",
    data: {
      labels: xAxis,
      datasets: [{
        label: "Random datas",
        data: yAxis,
        backgroundColor: "rgba(255, 99, 132, 0.2)",
        borderColor: "rgba(255, 99, 132, 1)",
        borderWidth: 1,
      }, ],
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true,
          },
        }, ],
      },
    },
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
<canvas id="myChart3"></canvas>