如何在 ChartJS 中动态更新值？

2025年5月18日 | 5 分钟阅读

Chart.js 是一个免费的开源 JavaScript 包，它使用数据来显示图表。动态图表更新允许进行实时和交互式数据可视化。在本文中，我们将探索如何动态更新图表值。

使用 update() 函数

可以使用 Chart.js 提供的 update 函数来更新整个图表对象。我们可以使用图表对象来开发一个封装所需修改的函数，以便动态更新图表。最后，我们将通过调用 chartName.update() 方法来更新图表。

语法

语法显示了更新函数以更改图表的值。我们可以使用数据集在函数中设置更新方法。语法使用微秒和秒单位设置时间间隔。在这里，我们将 2 秒设置为使用 2000 值更改动态值。

 
//Updating chart's value with update() method
setInterval( function UpdateCharts() {
let newDatas = [30, 40, 10, 50, 20];
//Changing Chart object data using the dataset array
BarChart.data.datasets[0].data = newDatas;
//Updating the chart with the data
BarChart.update();
} 2000);   

示例

以下示例显示了用于更改图表值的更新方法。我们可以设置一个计时器和其他函数来更改或更新数据集的数据。

示例 1

该示例显示了带有自动更新的图表值的雷达图。图表值使用 update() 方法每 2 秒更新一次。

 
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width,
initial-scale = 1.0">
<title> How Can Update a Chart's Values Dynamically in the ChartJS? </title>
<!-- Include Chart.js library -->
<script src = "
https://cdn.jsdelivr.net.cn/npm/chart.js">
</script>
<style>
div {
height: 40vh;
width: 40vw;
}
</style>
</head>
<body style = "background-color:beige;">
<h1> Javatpoint| Dynamically Update Pie Chart </h1>
<h3> How Can Update a Chart's Values Dynamically in the ChartJS? </h3>
<div>
<!-- Create a canvas element to create the pie chart -->
<canvas id = "pieCharts" width = "400" height = "400">
</canvas>
</div>

<script>
// Get the 2D displaying context of the canvas
let ctx = document
.getElementById('pieCharts')
.getContext('2d');

// Create a new Pie Chart with the type
let pieChart = new Chart(ctx, {
// Set the chart type
type: 'radar',
// Provide data for the chart with the UI
data: {
// Labels for each element of the pie
labels: ['JavaScript', 'ChartJs', 'NodeJs', 'ReactJs', 'NextJs', 'ExpressJs'],
datasets: [{
label: 'Student Subject for the Study',
// Datasets for the chart data
data: [110, 119, 123, 155, 320, 90],
// background color for each segment
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'blue', 'lightblue'],
// Border color and width for each segment
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 2
}]
},
// Additional options for the pie chart
options: {
responsive: true, //The true value sets the chart responsive
//This plugin shows the display Title of the chart
plugins: {
title: {
display: true,
text: 'Number of Students Enrolled Course'
}
}
}
});

// Dynamically update the chart value after every 2 seconds
setInterval(function () {
//Creating an array with 6 random value
let updatedData = Array(6).fill().map(getRandomValue);
//Update the chart objects
pieChart.data.datasets[0].data = updatedData;
//Update the method for the chart
pieChart.update();
}, 2000);

//This function sets the Random value for each segment
const getRandomValue = () => {
return Math.floor(Math.random() * 100)
}
</script>
</body>
</html>   

输出

输出显示了具有更新值的雷达图。

How do you update values dynamically in ChartJS

示例 2

该示例描述了使用图表函数动态更改值的饼图。我们可以设置随机数据方程以更改饼图中动态值。

 
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width,
initial-scale = 1.0">
<title> How Can Update a Chart's Values Dynamically in the ChartJS? </title>
<!-- Include Chart.js library -->
<script src = "
https://cdn.jsdelivr.net.cn/npm/chart.js">
</script>
<style>
div {
height: 40vh;
width: 40vw;
}
</style>
</head>

<body style = "background-color:beige;">
<h1> Javatpoint| Dynamically Update Pie Chart </h1>
<h3> How Can Update a Chart's Values Dynamically in the ChartJS? </h3>
<div>
<canvas id = "pieCharts" width = "400" height = "400">
</canvas>
</div>
<script>
let ctx = document
.getElementById('pieCharts')
.getContext('2d');
let pieChart = new Chart(ctx, {
// Set the chart type
type: 'pie',
// Provide data for the chart with the UI
data: {
// Labels for each element of the pie
labels: ['JavaScript', 'ChartJs', 'NodeJs', 'ReactJs', 'NextJs', 'ExpressJs'],
datasets: [{
label: 'Student Subject for the Study',
// Datasets for the chart data
data: [110, 119, 123, 155, 320, 90],
// background color for each segment
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'blue', 'lightblue'],
// Border color and width for each segment
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 2
}]
},
options: {
responsive: true,
//This plugin displays the Title of the chart
plugins: {
title: {
display: true,
text: 'Number of Students Enrolled Course'
}
}
}
});
// Dynamically update the chart value after every 2 seconds
setInterval(function () {
let updatedData = Array(6).fill().map(getRandomValue);
pieChart.data.datasets[0].data = updatedData;
pieChart.update();
}, 2000);
const getRandomValue = () => {
return Math.floor(Math.random() * 100)
}
</script>
</body>
</html>   

输出

输出显示了具有更新值的饼图。

示例 3

该示例描述了使用图表函数动态更改值的折线图。我们可以设置随机数据方程以更改折线点中的动态值。折线点值每 3 秒更改一次。

 
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width,
initial-scale = 1.0">
<title> How Can Update a Chart's Values Dynamically in the ChartJS? </title>
<!-- Include Chart.js library -->
<script src = "
https://cdn.jsdelivr.net.cn/npm/chart.js">
</script>
<style>
div {
height: 40vh;
width: 40vw;
}
</style>
</head>

<body style = "background-color:beige;">
<h1> Javatpoint| Dynamically Update Line Chart </h1>
<h3> How Can Update a Chart's Values Dynamically in the ChartJS? </h3>
<div>
<canvas id = "pieCharts" width = "400" height = "400">
</canvas>
</div>
<script>
let ctx = document
.getElementById('pieCharts')
.getContext('2d');
let pieChart = new Chart(ctx, {
// Set the line chart type
type: 'line',
// Provide data for the chart with the UI
data: {
// Labels for each element of the pie
labels: ['JavaScript', 'ChartJs', 'NodeJs', 'ReactJs', 'NextJs', 'ExpressJs'],
datasets: [{
label: 'Student Subject for the Study',
// Datasets for the chart data
data: [110, 119, 123, 155, 320, 90],
// background color for each segment
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'blue', 'lightblue'],
// Border color and width for each segment
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 2
}]
},
options: {
responsive: true,
//This plugin shows the Title of chart
plugins: {
title: {
display: true,
text: 'Number of Students Enrolled Course'
}
}
}
});
// Dynamically update the chart value after every 3 seconds
setInterval(function () {
let updatedData = Array(6).fill().map(getRandomValue);
pieChart.data.datasets[0].data = updatedData;
pieChart.update();
}, 3000);
const getRandomValue = () => {
return Math.floor(Math.random() * 100)
}
</script>
</body>
</html>   

输出

输出显示了具有更新值的折线图。

结论

chart.js 使用多个函数和 Javascript set interval 方法来随时间自动更改数据。动态值始终更改各个图表的部分和点以改变数据。

下一个主题如何在 Chartjs 中自定义图例

← 上一个下一个 →

如何在 ChartJS 中动态更新值？

使用 update() 函数

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Chart.js 教程

如何在 ChartJS 中动态更新值？

使用 update() 函数

语法

示例

结论

相关帖子

Chart.js 工具提示

Chart.js 安装和工作流程

Chart.js 动画

Chart.js 基础概念

Chart.js 副标题

Chart.js 基础和插件开发者

Chart.js 标题

如何在 Chart.js 中自定义图例

Chart.js 常见问题

Chart.js 数据抽稀配置

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器