【JS】Chart.js 雷達圖繪製
目前市面上有很多圖表js都可以達成這個需求。
選這個plugin的目的是「快速」
這個plugin不只使用簡單，功能也齊全，且自帶自適應裝置
因為有部分的plugin在canvas draw下去後就固定了，
不會判斷長寬改變重新draw
自適應這點也是主要的考量之一
否則要多花時間去處理canvas的部分
否則要多花時間去處理canvas的部分
Chartjs.org
官方網站:https://www.chartjs.org/
Plugin：Chart.bundle.js (ver2.7.2)
CODE:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta name="viewport" content="initial-scale = 1, user-scalable = no" /> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> | |
| <body> | |
| <div class="chartRadarDiv" style="height:100%" > | |
| <canvas id="chartRadar" style="height:50vh; width:50vw"></canvas> | |
| </div> | |
| <script src="Chart.bundle.js"></script> | |
| <script type="text/javascript"> | |
| //定義變數 | |
| var chartRadarDOM; | |
| var chartRadarData; | |
| var chartRadarOptions; | |
| //載入雷達圖 | |
| Chart.defaults.global.legend.display = false; | |
| Chart.defaults.global.defaultFontColor = 'rgba(0,0,74, 1)'; | |
| chartRadarDOM = document.getElementById("chartRadar"); | |
| chartRadarData; | |
| chartRadarOptions = | |
| { | |
| scale: | |
| { | |
| ticks: | |
| { | |
| fontSize: 16, | |
| beginAtZero: true, | |
| maxTicksLimit: 7, | |
| min:0, | |
| max:100 | |
| }, | |
| pointLabels: | |
| { | |
| fontSize: 25, | |
| color: '#0044BB' | |
| }, | |
| gridLines: | |
| { | |
| color: '#009FCC' | |
| } | |
| } | |
| }; | |
| console.log("---------Rader Data--------"); | |
| var graphData =new Array(); | |
| graphData.push(100); | |
| graphData.push(40); | |
| graphData.push(65); | |
| graphData.push(20); | |
| graphData.push(97); | |
| console.log("--------Rader Create-------------"); | |
| console.log(graphData); | |
| //CreateData | |
| chartRadarData = { | |
| labels: ['STR', 'CON', 'INT', 'WIS', 'CHA'], | |
| datasets: [{ | |
| label: "Skill Level", | |
| backgroundColor: "rgba(17, 34, 51,0.8)", | |
| borderColor: "rgba(63,63,74,.8)", | |
| pointBackgroundColor: "rgba(63,63,74,1)", | |
| pointBorderColor: "rgba(0,0,0,0)", | |
| pointHoverBackgroundColor: "#fff", | |
| pointHoverBorderColor: "rgba(0,0,0,0.3)", | |
| pointBorderWidth: 5, | |
| data: graphData}] | |
| }; | |
| //Draw | |
| var chartRadar = new Chart(chartRadarDOM, { | |
| type: 'radar', | |
| data: chartRadarData, | |
| options: chartRadarOptions | |
| }); | |
| </script> | |
| </body> | |
| </html> |
說明：
張貼留言