# C3.js 資料圖表
繼之前實作一篇 [D3.js 資料圖表](https://hackmd.io/UEzl5wVER7-jVRZj7jqYpQ) 後，這次來練習 C3.js
和 D3 比起來雖然 C3 相較簡單，但在樣式調整上就比較沒這麼自由 (也可能我太嫩)
參考資料：
[D3.js、C3.js 資料視覺化教學](https://youtu.be/0PQ8VOsyjzw)
[C3.js 官網](https://c3js.org/)
---
## 1. 整理資料格式
首先載入 CDN，由於 C3 是基於 D3 延伸的框架，所以需要先載入 D3
* https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js
* https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.min.js
* https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.css
再來，必須先了解 C3.js 要求的資料格式，以下是官網範例：
```javascript=
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
```
事先準備好兩個空陣列給需要取用的資料：
```javascript=
const processList = [] // 完成率
const nameList = [] // 參加者名單
```
避免資料太冗長，在儲存資料之前，我想排除完成率為 0 的名單
所以先加上判斷式後再 `push()`
```javascript=
res.data.forEach( item => {
let isProcess = parseInt(item.process)
if ( isProcess !== 0 ) {
processList.push(isProcess)
nameList.push(item.name)
}
})
```
用 `console` 確認一下得到的資料是否正確，如果沒問題就可以先放旁邊
## 2. 設定圖表內容
使用 C3.js 語法時和 jQuery 加上 $ 類似，前面需要加上 c3
C3.js 提供許多設定選項，可以參考 [官方文件](https://c3js.org/reference.html)
```javascript=
var chart = c3.generate({
bindto: "#chart", // 綁定元件
data: {
columns: [
processList // 圖表要呈現的資料
]
},
type: 'bar', // 圖表類型
})
```
基本宣告完後，可以得到一張還沒整理過的圖表：
### 設定 XY 軸
因為需要反轉圖表，所以加入設定後 XY 軸顯示會相反
```javascript=
axis: {
rotated: true, // 反轉圖表
x: {
show: true, // 顯示 X 軸
type: "category", // X 軸資料類型
categories: nameList, // X 軸需顯示的資料
tick: {
multiline: false // 顯示換行設定
}
},
y: {
show: true, // 顯示 Y 軸
max: 100 // Y 軸資料最大值
},
}
```
### 調整大小
加入尺寸設定後就會看起來像個正常一點的圖表了
```javascript=
size: {
height: processList.length * 40,
width: 900
}
```
### 加入標籤
* 在 X 軸加入標籤（左側）
```javascript=
label: {
text: '參加者名單', // 標籤文字
position: 'outer-middle' // 標籤位置
},
```
* 在 Y 軸加入標籤（下方）
這邊不是寫在 Y 軸設定裡，因為是主要顯示的資料
所以要回頭寫在一開始準備的空陣列中，這樣就可以正確顯示標籤文字
```javascript=
const processList = ['完成率%']
```
## 3. 樣式設定
* 圖表顏色
```javascript=
colors: {
'完成率%': '#EF9080',
}
```
* SASS 設定
```sass=
// 標籤文字
text
fill: #a8a8a8
font-size: 13px
// XY 軸線條顏色
.c3-axis-x, .c3-axis-y
path, line
stroke: rgba(#a8a8a8, .3)
```
## 4. 依照完成率排序
最後，因為題目需求要 **可以同時看出排名**
所以再回到一開始的步驟，在儲存資料前先進行資料排序
```javascript=
res.data.sort( (a,b) => parseInt(b.process) - parseInt(a.process) )
```
---
DEMO：[JS特訓班統計表](https://codepen.io/kaoru44689/pen/jOWXPxM)
Sign in with Wallet
Connect another wallet