Chart.js 範例
Chart.js 是專門將圖表以 HTML 呈現方式應用在網頁上,
官網都有詳細說明,個人覺得不難理解,故只列出範例,
就不多做說明了。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> </head> <body> <canvas id="myChart" width="900" height="900"></canvas> <script> Chart.defaults.global.defaultFontSize = 20; var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'radar', data: { labels: ['強化系', '變化系', '具現化系', '特質系', '操作系', '放出系'], datasets: [{ data: [60, 80, 100, 0, 60, 40], label: '單位%', backgroundColor: 'rgb(215, 236, 251,0.5)', borderColor: 'rgba(54, 162, 235,1)', pointBackgroundColor: 'rgba(54, 162, 235,1)', pointRadius: 5, pointHoverBackgroundColor: 'rgba(54, 162, 235,1)', pointHoverRadius: 5, }] }, options: { layout: { padding: { left: 0, right: 0, top: 0, bottom: 500 } }, legend: { display: true, labels: { fontSize: 20 } }, scale: { pointLabels: { fontSize: 20, } } } }); </script> </body> </html>
參考資料: