Chart.js是一個流行的JavaScript圖表庫，可以通過其他數據源加載數據，包括JSON文件。下面是一個演示如何讀取JSON文件并在圖表中繪制數據的示例。

//創建XHR對象
var xmlhttp = new XMLHttpRequest();
//打開JSON文件
xmlhttp.open("GET", "data.json", true);
//從服務器獲取響應
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
//從JSON對象中提取數據
var labels = myObj.chart_data.labels;
var data = myObj.chart_data.data;
//創建圖表
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Data Points',
data: data,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
};
xmlhttp.send();

該代碼使用XMLHttpRequest對象從"data.json"文件中讀取JSON數據。然后，使用JSON.parse()方法將數據從字符串格式轉換為JavaScript對象。我們使用該對象提取包含標簽和數據的數組。然后，使用這些數組創建Chart.js圖表。