Chart.js 是一款流行的 JavaScript 库，用于创建图表和数据可视化。本文将介绍如何使用 Chart.js 加载新数据以更新现有图表。
步骤 1: 配置 Chart.js
首先，在 HTML 文件中引入 Chart.js：
<head> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head>
然后，在 JavaScript 中创建一个新的 Chart 实例：
const chart = new Chart(ctx, config);
其中，ctx 是指向 HTML5 canvas 元素的上下文对象，config 是配置选项。
步骤 2: 声明新数据变量
在加载新数据之前，需要先声明一个新的数据变量。假设我们的数据是一个包含时间序列和对应数据值的对象数组：
const newData = [
{ time: '2022-01-01', value: 10 },
{ time: '2022-02-01', value: 20 },
{ time: '2022-03-01', value: 30 },
// ...
];步骤 3: 更新配置选项
接下来，需要更新 Chart.js 的配置选项以反映新数据。具体来说，需要更新 data.labels 和 data.datasets.data 属性：
chart.config.data.labels = newData.map(d => d.time); chart.config.data.datasets[0].data = newData.map(d => d.value);
这将把时间序列和对应数据值分别添加到 data.labels 和 data.datasets.data 中。
步骤 4: 调用 update 方法
最后，调用 Chart.js 实例的 update 方法以更新图表：
chart.update();
这将重新绘制图表，并使用新数据替换现有数据。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
-----------------------
------- -----------------------------------------------------
-------
------
------- ----------------------
--------
----- --- - ----------------------------------------------------
----- ---- - -
------- -------------- ------------- --------------
--------- --
------ --- ---------
----- ---- --- ----
--
--
----- ----- - --- ---------- -
----- -------
----- -----
---
----- ------- - -
- ----- ------------- ------ -- --
- ----- ------------- ------ -- --
- ----- ------------- ------ -- --
--
------------------------ - ------------- -- --------
---------------------------------- - ------------- -- ---------
---------------
---------
-------
-------在上面的示例中，我们创建了一个包含三个数据点的线性图表。然后，我们声明了一个新的数据变量 newData，并将其添加到图表中。最后，我们调用了 update 方法以显示新数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13389