雷達圖 Radar Chart

說明

1.雷達圖依賴於 D3.js

2.該專案使用npm來管理plugin依賴，當使用npm install後會將d3.js下載放置專案夾中的node_modules。

3.使用gulp處理css與javascript最小化。

4.npm與gulp都需要nodejs，想使用npm與gulp須先安裝nodejs。

5.如果你不想使用npm與gulp，需自自行下載d3.js與自行處理css與javascript壓縮最小化。

6.npm依賴管理主要使用package.json來設定。

7.gulp工作內容使用gulpfile.js設定。

雷達圖原理： 主要使用三角函數

P = (sin(弧度) ＊ 半徑 , cos(弧度) * 半徑)

a. 縱軸起點與終點主要因素由半徑決定線之兩點。
b. 橫軸起點與終點主要因素由弧度來決定。

一個圓的弧為 ：  arc = PI * 2
如果有五個縱軸，一個軸弧基礎值是  :  onePiece = arc / 5

縱軸1的弧 ： radian1 = 0 * onePiece  
縱軸2的弧 ： radian2 = 1 * onePiece
 .
 .
 .
縱軸n的弧 ： radianN = n * onePiece

而橫軸的兩點的弧就是 radianN 與 radianN+1

此為主要數學原理，以此原理即可做出屬於自己的雷達圖。

安裝 Install

1.npm install d3

2. sudo npm install

3. gulp

資料結構 Data structure

var data = [
     [
           {axis: "國文", value: 16}, 
           {axis: "數學", value: 0}, 
           {axis: "英文", value: 8},  
           {axis: "歷史", value: 4},  
           {axis: "物理", value: 9}
          ],[
           {axis: "國文", value: 16}, 
           {axis: "數學", value: 16}, 
           {axis: "英文", value: 4}, 
           {axis: "歷史", value: 1},  
           {axis: "物理", value: 15}
          ],[
           {axis: "國文", value: 5}, 
           {axis: "數學", value: 1}, 
           {axis: "英文", value: 16}, 
           {axis: "歷史", value: 16},  
           {axis: "物理", value: 16}
     ]
];

範例 examp

設定 Configure