---
tags: JS 直播班 - 2022 秋季班
---
# 第七週：第三方 JS 套件整合之術
## 課前提要
* 下堂課沒有主線任務！讓大家專注在影音課程 axios 接 API 上
* 前半段講 C3.js，後半段講資料處理，以第[五關小組任務](https://hackmd.io/LUaQGbDqTm2Wh8RoniSNVA)為例子

# 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/32/task?type=detail&id=318" target="_top">第七關主線任務</a>