在網頁開發中,經常需要將大量數據以視覺化圖表呈現,幫助使用者更快地理解數據內容和趨勢。這裡介紹一款最常用也最容易上手的 JS 圖表套件 Chart.js。
Chart.js – 簡單實用的JS圖表庫
Chart.js 具有人性化的簡潔設計和強大的客製化能力，非常適合新手快速入門。
官方連結 : https://www.chartjs.org/
簡易使用範例
- 引入Chart.js
首先透過CDN或npm將Chart.js引入你的網頁:
<!-- CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script><!-- 或是使用npm -->
npm install chart.js- 準備Canvas元素
接著在HTML中準備一個<canvas>容器,這就是之後圖表呈現的區域:
<canvas id="myChart"></canvas>- 使用Chart.js API繪製圖表
最後就是在JavaScript撰寫程式碼,呼叫Chart.js提供的API函式即可輕鬆繪製圖表:
// 準備圖表資料
var data = {
labels: ['一月', '二月', '三月', '四月'],
datasets: [{
label: '營收統計',
data: [5000, 8000, 12000, 6500],
backgroundColor: 'rgb(116, 185, 255)'
}]
};
// 設定圖表類型和屬性
var options = {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
};
// 繪製圖表
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar', // 圖表類型
data: data,
options: options
});結果呈現
以上範例將會在網頁上呈現一個簡單的營收統計長條圖。你只需傳入對應的資料和樣式設定,Chart.js會自動幫你生成高品質的互動式圖表,內建支援8種常見圖表類型,例如折線圖、圓餅圖和散佈圖等。
除了基本功能外,Chart.js還提供了例如動態更新、樣式自訂、多重資料序列等進階選項,讓你的圖表能按需求客製化,與網頁設計完美無縫整合,為你的數據視覺化體驗增添獨特魅力。
總結
在現代網頁中,能夠將數據以圖表方式呈現可說是相當重要的技能。透過引入輕量且功能強大的JS圖表庫,就能輕鬆打造出美觀又專業的數據視覺化呈現,為網站增添更多可讀性和說服力。
發表迴響