---
tags: JS 直播班 - 2021 秋季班
---

# 第七堂：第三方 JS 套件整合之術
* [報到](https://rpg.hexschool.com/training/24/calendar) Code：`37xf3HwklFLK`
* 下堂課沒有主線任務！讓大家專注在影音課程 axios 接 API 上
* 前半段講 C3.js，後半段講資料處理，以第[五關小組任務](https://hackmd.io/dmlKNxGHQdSaxpko5INSqw)為例子

## 時間表，下週五釋出 The F2E 彩蛋授課時間
1. 12/3(五) 最後一堂課
1. 12/17(日) 作業截止日
1. 12/24(日) 心得牆、獎品表單截止日
1. 12/30(四) 成果發表會

# C3.js基本教學

* [環境安裝](https://c3js.org/gettingstarted.html)
* [環境範例程式碼](https://codepen.io/hexschool/pen/poRzRXW?editors=1010)
* [折線圖增加時間軸](https://codepen.io/hexschool/pen/dyNbvOb?editors=1010)
* [變更圖表 type 圓餅圖](https://codepen.io/hexschool/pen/bGgbgXB?editors=1010)
* [修改顏色與標題](https://codepen.io/hexschool/pen/NWdKpXw)

# 陣列、物件資料處理
* 用套件不難，**工程師的價值在整合**
* 需將原始資料改為套件要的格式，[範例](https://codepen.io/hexschool/pen/xxgGggO?editors=0010)
## 觀念一：物件數據蒐集
* [計算陣列裡面各地區人數](https://codepen.io/hexschool/pen/wvgwoBj?editors=0011)
* [第五關小組任務最後一題](https://codepen.io/hexschool/pen/yLgNVWZ)、[原始資料](https://cabu4.kcg.gov.tw/KcgRegion/OpenData/%E9%87%8C%E9%95%B7%E9%80%9A%E8%A8%8A%E9%8C%84.JSON)

## 觀念二：Object.key 做資料關聯陣列再處理
### Object.key 用途：將所有屬性撈出來，變成一個陣列

const totalObj = {高雄: 2, 台北: 1, 台中: 1};
const areaAry = Object.keys(totalObj);
// area output ["高雄","台北","台中"]

* 用途一：[透過資料關聯，做物件取值](https://codepen.io/hexschool/pen/PoWqWPQ)
* 用途二：[重組陣列資料 I](https://codepen.io/liao/pen/GRvPQMZ?editors=1010)
* 用途三：[重組陣列資料 II-為 C3.js 所用](https://codepen.io/liao/pen/eYEbVGj?editors=1011)

const totalObj = {高雄: 2, 台北: 1, 台中: 1};
const areaAry = Object.keys(totalObj);
// area output ["高雄","台北","台中"]
let newData = [];
areaAry.forEach(function(item,index){
  let ary = [];
  ary.push(item);
  ary.push(totalObj[item]);
  newData.push(ary);
})
console.log(newData)
// c3 要的資料格式
//[["高雄", 2], ["台北",1], ["台中", 1]]

## C3 套用
* [範例程式碼](https://codepen.io/liao/pen/VwzqQrw?editors=0010)
* [AJAX LV1 JSON+C3](https://codepen.io/hexschool/pen/VwPwRyd?editors=0010)
* [C3.js+LV1 AJAX+本地端新增資料](https://codepen.io/hexschool/pen/ExZxMpv)

## 其他範例
* [前後端男女性比例](https://codepen.io/liao/pen/XWaoaxV?editors=1010)
* [上屆學長姐 BMI kata 投稿人數折線圖(時間序列折線圖)](https://codepen.io/liao/pen/LYjMjqX?editors=1010)

## 第七關主線任務
* <a href="https://rpg.hexschool.com/training/24/task?type=detail&id=227" target="_top">第七關主線任務</a>
* LV1：修改老師的 [Codepen](https://codepen.io/hexschool/pen/NWbOPJM?editors=0010)，接 [API](https://raw.githubusercontent.com/hexschool/js-training/main/travelAPI-lv1.json) 顯示 Donut 圖
* LV2：依照此 [XD 設計稿](https://xd.adobe.com/view/3b957757-f50b-4a73-be01-16393e53f49b-6ec6/)，用 axios 介接資料，並顯示 C3 圖表
* LV3：做 LV2，並加上上方套票新增時，下方 C3 與套票列表也會即時更新

## 最終任務重要關鍵

* [第八、九關主線 10 隻 API 文件](https://www.notion.so/API-8b5b74eb052b451faf28013d76811fac)
* [最終關卡 XD 設計稿](https://xd.adobe.com/view/a48b8617-4588-4817-9062-b62130dce916-f1d8/)