AJAX（Asynchronous JavaScript and XML）和 JSON（JavaScript Object Notation）是一對非常有用的前端技術。它們可以相互配合實現各種功能，其中之一就是實現餅狀圖。利用 AJAX，我們可以異步地獲取服務器上的數據，然后利用 JSON 來處理和展示這些數據。在本文中，我們將通過一些示例來介紹如何使用 AJAX 和 JSON 實現餅狀圖。

首先，我們需要一個后端接口來獲取數據，并以 JSON 的格式返回給前端。假設有一個名為 "getData.php" 的接口，它返回了以下數據：

<?php
$data = [
['label' => '蘋果', 'value' => 50],
['label' => '香蕉', 'value' => 30],
['label' => '橙子', 'value' => 20]
];
header('Content-Type: application/json');
echo json_encode($data);
?>

接下來，在前端頁面中，我們可以使用 AJAX 來異步地請求這些數據：

<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'getData.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 在此處處理返回的數據
}
};
xhr.send();
</script>

在以上代碼中，我們創建了一個 XMLHttpRequest 對象，并通過 open 方法指定了請求的方式、URL 和異步標志。然后，我們設置了 onreadystatechange 事件處理函數，當請求完成且成功時，我們使用 JSON.parse 方法將返回的數據轉換成 JavaScript 對象。

接下來，我們需要利用返回的數據來生成餅狀圖?？梢允褂酶鞣N JavaScript 圖表庫，比如 Chart.js、ECharts 等。在這里，我們以 Chart.js 為例：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: response.map(function(item) {
return item.label;
}),
datasets: [{
data: response.map(function(item) {
return item.value;
}),
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
]
}]
},
options: {
// 配置項
}
});
</script>

在以上代碼中，我們首先引入了 Chart.js 庫。然后，創建一個 canvas 元素來展示餅狀圖。接下來，通過獲取的數據和 Chart.js 的 API，我們實例化了一個圖表，并使用 response.map 方法來構建餅狀圖的標簽和數據。最后，我們使用一個數組來指定每個部分的背景顏色。

通過以上步驟，我們成功地使用 AJAX 和 JSON 實現了一個簡單的餅狀圖。當然，實際情況可能更加復雜，但核心思路是相同的：通過 AJAX 異步地獲取數據，然后利用 JSON 處理和展示這些數據。希望這篇文章對你理解如何使用 AJAX 和 JSON 實現餅狀圖有所幫助。