如何让图表js实时显示数值？

Question

我刚学会做一个web，我想知道如何做图表js来实时显示数值。你们能给我建议或告诉我该怎么做吗？

var data = [];
var temp = [];

async function getRandomUser() {
    const response = await fetch('http://localhost:1111/chartpie');
    const data = await response.json();
    addData(data);
}

function addData(object) {
    temp.push(object.temperature);
    var z = 80;
    var y = z - temp;
    var ctx = document.getElementById("myPieChart");
    myPieChart = new Chart(ctx, {
        type: "doughnut",
        data: {
            labels: ["Temperature", "Null"],
            datasets: [{
                data: [temp, y],
                backgroundColor: [
                    "orange",
                    "rgba(0, 172, 105, 1)"
                ],
            }]
        },
        options: {
            legend: {
                display: false
            },
        }
    });
}

getRandomUser()

我获取的值是从mongoDB中获取的值，以数组的形式获取。谢谢！

Answer 1

您可以通过添加到图表数据数组来“实时”更新图表。

参见：https://www.chartjs.org/docs/latest/developers/updates.html

通过更改数据数组支持添加和删除数据。到 添加数据，只需将数据添加到数据数组中，如本例所示。

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

例如...

const canvas = document.getElementById('myChart');
canvas.height = 75;

const labels = [
  'dju32',
  'ad6b2',
  '0f23f',
  'asd4c',
];

const data = {
  labels: labels,
  datasets: [{
    label: 'Test',
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: [0, 10, 5, 4],
  }]
};

const config = {
  type: 'line',
  data: data,
  options: {}
};

const myChart = new Chart(
  canvas,
  config
);

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

// randomly add new data
setInterval(function() {
  const newLabel = (Math.random() + 1).toString(36).substring(7);
  const newData = Math.floor(Math.random() * 10);
  addData(myChart, newLabel, newData);
}, 1000);

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div>
  <canvas id="myChart"></canvas>
</div>