# 第七週：第三方 JS 套件整合之術

## 開課提醒
1. 錄影
2. [第六週週報](https://liberating-turtle-5a2.notion.site/EP6-d3706659b7a24e7da6c5e3a1af336193?pvs=4)
3. 下一堂課沒有主線任務，讓大家專注在影音課程 axios 接 API 上

## 今日上課知識點
1. C3.js
2. 將資料處理成套件要的格式

---

## C3.js

1. [環境安裝](https://c3js.org/gettingstarted.html)
* 載入 C3 css

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.css">

* 載入 d3.js and c3.js

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.js"></script>

2. 圖表進入點

<div id="chart"></div>

3. 圖表 JS 設定

const chart = c3.generate({
  bindto: '#chart', // HTML 元素綁定
  data: {
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250],
      ['data2', 50, 20, 10, 40, 15, 25]
    ] // 資料存放
  }
});

> [完整範例](https://codepen.io/hexschool/pen/poRzRXW?editors=1000)

其他用法：
* [折線圖增加時間軸](https://codepen.io/hexschool/pen/dyNbvOb?editors=1010)
> 補充： [時間軸改變時間格式](https://codepen.io/hexschool/pen/GRzyvpQ?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/hexschool/pen/eYxyEgN?editors=0010)
* 用途三：[重組陣列資料 II-為 C3.js 所用](https://codepen.io/hexschool/pen/YzBYxNE?editors=1011)

### 資料處理好，套用至 C3
* [資料處理完整程式碼](https://codepen.io/liao/pen/VwzqQrw?editors=0010)
* [AJAX＋資料處理＋C3](https://codepen.io/hexschool/pen/VwPwRyd?editors=0010)
* [AJAX＋資料處理＋C3＋本地端新增資料](https://codepen.io/hexschool/pen/ExZxMpv)

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

---

## 本週任務
1. 主線任務
2. 小組任務