---
tags: JS新手特訓班-每日
title: JS新手特訓班 - Day30 7/17
---
# Day30 7/17

## 圖表整合
前幾關已練習使用 axios去撈取 API資料，這次再利用 C3.js將資料匯入製成圖表
### [codePen](https://codepen.io/hsuan333/pen/xxZyGBo)
### 外部資源
- 第三方插件
- [C3.js](https://c3js.org/examples.html)
- [axios](https://github.com/axios/axios)
- [練習用 API](https://raw.githubusercontent.com/hexschool/hexschoolNewbieJS/master/data.json
)
### 開發過程
#### 定義資料格式
為了符合 C3.js需要的資料格式，必須將撈取回來的資料進行重組
- 挑選 Bar Chart來進行圖表繪製
- 需要的資料格式為均為陣列 `[['資料名稱', 值],['資料名稱', 值],... ]`
- 資料陣列 [[單筆資料],[單筆資料],...]
- 單筆陣列 [單筆資料]
- 適當修改長條寬度 `width: { ratio: 0.5 }`

#### 重組資料
已經知道 Bar Chart所需的資料格式，下一步需要資料重組成我們要的
- [x] 由於資料筆數太多，於是進行分組處理，挑了前30筆資料組成三個群組
- [x] 將圖表繪製與排序寫成 function，以利重複處理資料
- [x] 適當將函示註解分類，功能類與工具類
- [x] 將 API資料丟進排序函式處理
- [x] 利用 forEach將 API資料依序 push至暫存陣列[單筆資料]，
再將暫存陣列 push到資料陣列
- [x] 將資料陣列利用` slice()`挑出分組資料 `newArray.slice(0, 9);`
- [x] 將分組資料分別丟進圖表函式作處理
- 由於要分成3個群組，而C3.js抓取網頁元素的 ID預設為 #chart
- 在 `c3.generate`中增加此屬性 bindto: `#網頁元素ID`,
就能抓取不同 ID並繪製不同圖表