保持新鮮：使用新數據更新你的 Chart.js 圖表

Chart.js 圖表是可視化數據的絕佳方式，但如果你的數據發生變化該怎麼辦？別擔心，Chart.js 允許你動態更新圖表，使其保持新鮮並反映最新信息。這個初學者友好的指南將向你展示如何輕鬆更新你的 Chart.js 圖表！

理解數據更新：

假設你有一個圖表顯示網站流量隨時間的變化。隨著新訪問者的到來，你會希望更新圖表以反映這些變化。以下是 Chart.js 如何處理數據更新的方式：

1. 修改數據對象：圖表的數據通常存儲在 JavaScript 對象中。要更新圖表，你需要修改這個對象中的值。
2. 觸發更新：一旦你修改了數據對象，你需要告訴 Chart.js 用新信息重新繪製圖表。

更新圖表的步驟：

以下是更新 Chart.js 圖表的步驟細節：

定義你的圖表：

首先，使用 Chart.js 創建你的圖表，並指定數據和選項：

const ctx = document.getElementById('myChart').getContext('2d');

const data = {
  labels: ['Jan', 'Feb', 'Mar'],
  datasets: [{
    label: 'Website Traffic',
    data: [1000, 1200, 1500],
    backgroundColor: 'rgba(75, 192, 192, 0.2)',
    borderColor: 'rgba(75, 192, 192, 1)'
  }]
};

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

const myChart = new Chart(ctx, config);

在這裡，我們創建了一個顯示前三個月網站流量數據的折線圖（data）。我們將新創建的圖表對象存儲在變量 myChart 中。

更新你的數據：

現在，假設你有四月的新流量數據：

// Update the data object with new values
data.labels.push('Apr');
data.datasets[0].data.push(1800);

• We add “Apr” to the labels array to represent the new month on the X-axis.
• We push the new traffic value (1800) to the data array within the dataset.

告訴 Chart.js 更新：

最後，我們使用 myChart 對象來指示 Chart.js 用修改後的數據更新圖表：

myChart.update();

The update() update() 方法告訴 Chart.js 根據最新數據重新渲染圖表。 data 對象內控制字體樣式和顏色。

額外提示：

• 你可以更新數據對象中的任何部分，不僅僅是數據點。這使你可以動態更改標籤、顏色或其他圖表配置。
• 考慮使用事件監聽器或由新數據觸發的函數來自動化更新過程。

總結：

通過了解如何修改數據對象和觸發 update() 方法，你可以保持 Chart.js 圖表的動態性和信息性。這使你能夠實時向觀眾展示最新數據。大膽地更新你的圖表吧！