AJAX (Asynchronous JavaScript and XML) 和 Chart.js 是兩個常用的技術，AJAX 可以實現頁面的異步加載，而 Chart.js 可以創建各種類型的交互式圖表。結合使用 AJAX 和 Chart.js，我們可以通過異步獲取數據并使用 Chart.js 創建動態圖表，為用戶提供更好的數據展示和交互體驗。

假設我們正在開發一個電商網站，需要實時展示各個產品分類的銷售情況。我們可以通過 AJAX 異步請求后端獲取到最新的銷售數據，并使用 Chart.js 創建一個柱狀圖來展示不同分類的銷售額。當用戶選擇不同的分類時，我們可以使用 AJAX 再次請求后端數據，然后使用 Chart.js 更新圖表，實現實時更新數據的效果。

// AJAX 請求示例
$.ajax({
url: 'http://www.example.com/sales-data',
method: 'GET',
success: function(response) {
// 處理接收到的數據
var salesData = response.data;
// 創建 Chart.js 圖表
var ctx = document.getElementById('sales-chart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: salesData.categories,
datasets: [{
label: '銷售額',
data: salesData.sales,
backgroundColor: 'rgba(0, 123, 255, 0.5)', // 藍色半透明背景色
borderColor: 'rgba(0, 123, 255, 1)', // 藍色邊框色
borderWidth: 1 // 邊框寬度
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
},
error: function(error) {
console.log('請求失敗: ' + error);
}
});

上述代碼中，我們使用了 jQuery 的 AJAX 方法向指定的 URL 發送 GET 請求，并在請求成功后創建 Chart.js 圖表。通過指定 `type: 'bar'`，我們創建了一個柱狀圖。數據和樣式的配置信息包含在 `data` 和 `options` 中，我們將獲取到的銷售數據傳遞給圖表，并設置了柱狀圖的背景色、邊框色和邊框寬度。

當用戶選擇不同的產品分類時，我們可以添加一個事件監聽器，當用戶選擇改變時觸發 AJAX 請求，并根據新的數據重新更新 Chart.js 圖表。

// 選項變化事件監聽器示例
$('#category-select').change(function() {
var selectedCategory = $(this).val();
// 發送 AJAX 請求，獲取特定分類的銷售數據
$.ajax({
url: 'http://www.example.com/sales-data?category=' + selectedCategory,
method: 'GET',
success: function(response) {
// 處理接收到的數據
var salesData = response.data;
// 更新 Chart.js 圖表數據
chart.data.labels = salesData.categories;
chart.data.datasets[0].data = salesData.sales;
chart.update(); // 更新圖表
},
error: function(error) {
console.log('請求失敗: ' + error);
}
});
});

上述代碼中，我們使用 jQuery 的 `change` 方法監聽選擇框的變化事件。當用戶選擇不同的分類時，我們通過 `$(this).val()` 獲取選中的值，并將其作為參數添加到 AJAX 請求的 URL 中。當請求成功后，我們更新 Chart.js 圖表的數據，并使用 `chart.update()` 方法更新圖表。

通過上述的示例，我們可以看到如何結合 AJAX 和 Chart.js 創建動態圖表。用戶可以通過選擇框等方式選擇不同的數據展示方式，通過異步請求最新的數據并實時更新圖表，使用戶獲得最準確的和實時的數據情況。