radar-chart/README.md

Radar Chart

## 雷達圖 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
```html

```



### 設定 Configure
```javascript
```