Chart.js传值数据动态

在使用Chart.js创建图表时，可以通过动态传值的方式更新图表数据。以下是一个简单的示例，展示如何使用JavaScript动态更新Chart.js图表的数据。

HTML部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic Chart.js</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <body> <canvas id="myChart" width="400" height="200"></canvas> <button onclick="updateData()">Update Data</button> <script src="script.js"></script> </body> </html>
JavaScript部分（script.js）： // 初始化图表 const ctx = document.getElementById('myChart').getContext('2d'); let myChart = new Chart(ctx, { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'Monthly Sales', data: [65, 59, 80, 81, 56, 55, 40], backgroundColor: 'rgba(75, 192, 192, 0.2)', borderColor: 'rgba(75, 192, 192, 1)', borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } }); // 更新数据函数 function updateData() { // 生成新的随机数据 const newData = Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)); // 更新图表数据 myChart.data.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; myChart.data.datasets[0].data = newData; // 更新图表 myChart.update(); }

HTML部分：
- 创建一个<canvas>元素用于绘制图表。
- 添加一个按钮，点击按钮时调用updateData()函数。
JavaScript部分：
- 使用Chart.js库初始化一个折线图。
- 定义updateData()函数，该函数生成新的随机数据并更新图表的数据。
- 调用myChart.update()方法更新图表。