剛學會做網頁，想知道怎么做圖表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中檢索的值，以陣列的形式獲取。謝謝你！
uj5u.com熱心網友回復：
您可以通過添加到圖表資料陣列來“實時”更新圖表。
見：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 - 1 1)) 1;
addData(myChart, newLabel, newData);
}, 1000);<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div>
<canvas id="myChart"></canvas>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/525155.html
上一篇：使用i標簽切換跨度文本