Chart.js 是一個功能強大的 JavaScript 圖表庫，可幫助用戶在網站或應用中輕松創建漂亮的圖表。Chart.js 具有許多可用選項，可以自由定制外觀和交互性。JSON 數據是 Chart.js 支持的一種數據源格式，本文將介紹如何使用 Chart.js 接受 JSON 數據并創建圖表。

在 Chart.js 中創建圖表通常需要兩個主要組件：一個畫布元素和一個配置對象。以下是一個通過 ID 選擇畫布元素并指定配置對象的示例：

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
// 配置選項
});

要將 JSON 數據傳遞給 Chart.js，我們需要執行以下步驟：

1. 使用 Ajax 或 Fetch API 從服務器獲取 JSON 數據。
2. 將 JSON 數據解析為可用的 JavaScript 對象。
3. 在配置對象中指定圖表的數據屬性，其中數據屬性的值是解析后的 JavaScript 對象。

以下是一個使用 jQuery 的 Ajax 從服務器獲取 JSON 數據并創建一個簡單的線性圖表的示例：

// 獲取 JSON 數據
$.ajax({
url: 'data.json',
dataType: 'json',
success: function(data) {
// 解析數據為 JavaScript 對象
var chartData = {
labels: data.labels,
datasets: [{
label: 'My Dataset',
data: data.values
}]
};
// 創建圖表
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'line',
data: chartData
});
}
});

在配置對象中，我們使用data屬性指定圖表的數據，并將圖表數據對象指定為值。值是一個包含標簽和數據集數組的對象，其中數據集數組包含實際的數據。

總之，Chart.js 可以輕松地使用 JSON 數據創建漂亮的圖表。通過使用 Ajax 或 Fetch API 與服務器通信，并將數據解析為 JavaScript 對象，可以快速創建柱狀圖、線性圖、餅圖等。使用 Chart.js，您可以自由定制這些圖表的各種選項，例如顏色、標簽、標題等。