Chart.js 是一個很受歡迎的 JavaScript 庫,它可以用來創建漂亮的圖表來展示數據。Chart.js 支持從 JSON 對象或 URL 加載數據來繪制圖表。下面我們將展示如何使用 Chart.js 讀取和展示 JSON 格式的數據。
{ "labels": ["一月", "二月", "三月", "四月", "五月", "六月"], "datasets": [ { "label": "銷售量", "backgroundColor": "#FF6384", "borderColor": "#FF6384", "data": [1000, 2000, 1500, 3500, 2500, 4000] }, { "label": "利潤", "backgroundColor": "#36A2EB", "borderColor": "#36A2EB", "data": [200, 500, 1000, 1500, 800, 1200] } ] }
以上是一個包含兩個數據集(銷售量和利潤)的 JSON 對象。我們可以用以下 JavaScript 代碼讀取并展示這個 JSON 數據。
var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var data = JSON.parse(this.responseText); var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: data, options: { scales: { y: { beginAtZero: true } } } }); } }; xmlhttp.open("GET", "data.json", true); xmlhttp.send();
在以上代碼中,我們用 XMLHttpRequest 對象從 data.json 文件中獲取 JSON 數據。一旦我們成功獲取了數據,就可以用 Chart.js 創建一個柱狀圖,并將數據集作為其數據來配置圖表。注意,我們需要使用 JSON.parse() 函數將 JSON 字符串解析為 JavaScript 對象。
總結一下,上述代碼用于讀取 JSON 數據并將其可視化為圖表。這種 JSON 數據格式是 Chart.js 支持的一種標準格式。Chart.js 將非常有用和通用,因為你可以用它創建任何類型的圖表——從簡單的柱狀圖到復雜的散點圖、雷達圖和熱圖等。