---
# System prepended metadata

title: "\U0001F3C5 Day 34 - C3.js 使用練習"
tags: [JS 直播班 - 2024 秋季班]

---

# 🏅 Day 34 - C3.js 使用練習 

練習使用 [C3.js](https://c3js.org/gettingstarted.html) 這個套件！

> 記得載入 CDN
> C3.js 
> - CSS `https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css`
> - JS `https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js`
> 
> D3.js `https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js`（v5 版本）
> 
> 簡易範例：https://codepen.io/hexschool/pen/WNyGYbw?editors=1010

問題一
---
老媽希望了解一下她的兩個兒子，大翰跟小寶，每天在學校的數學小考成績狀況如何。她透過 C3.js 的 [折線圖](https://c3js.org/samples/timeseries.html) 將他們兩個的 成績數據 圖像化，已經知道圖像化後的結果如下圖：

![](https://i.imgur.com/uwET4hP.png)

請問 JS 程式碼應該如何撰寫？

> 成績數據
> 
> ![](https://i.imgur.com/OF6MA7a.png)
>  
> 可以參考：https://c3js.org/samples/timeseries.html


問題二
---
六角高中準備舉辦園遊會，要由同學們票選出這次的主題。班長透過 C3.js 的 [Donut Chart](https://c3js.org/samples/chart_donut.html) 將投票數據呈現如下：

![](https://i.imgur.com/Tj3YK52.png)

已經知道主題有三種，它們各自的得票數以及色碼資訊為：

|    主題    | 得票數 |  色碼   |
|:----------:|:------:|:-------:|
|    鬼屋    |   10   | #E68618 |
| 女僕咖啡廳 |   20   | #F280CA |
|  童話世界  |   5    | #26BFC7 |


請問 JS 程式碼應該如何撰寫？


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  

https://codepen.io/hexschool/pen/MWXKoGd?editors=1010
-->




回報區
---
| #   | Discord | CodePen / 答案 |
| --- | ----- | ----- |
| 01  |  voke | [CodePen](https://codepen.io/FiSi-the-lessful/pen/bGXvZwG) | 
| 02  | Hedwig | [CodePen](https://codepen.io/adirehfz-the-encoder/pen/poMYJgX?editors=1010) | 
| 03  | 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/RwXdPRQ) | 
| 04  | 泊岸 | [CodePen](https://codepen.io/qoq77416416/pen/YzmgXre?editors=0010) | 
| 05  | tim | [CodePen](https://codepen.io/jskrtivy-the-animator/pen/YzmgXdj?editors=1010) | 
| 06  | 睿睿 | [CodePen](https://codepen.io/uwmrsusb-the-solid/pen/yLmwNEY?editors=0011) | 
| 07 | yuyuhunter_0509 | [CodePen](https://codepen.io/KRcube/pen/gOVEaaN?editors=1010) | 
| 08 | .tsz_ying | [CodePen](https://codepen.io/bekgnohe-the-selector/pen/XWvGmpV?editors=1010) | 
| 09 | david1819 | [CodePen](https://codepen.io/David-Lin-the-vuer/pen/zYgbvzW) | 
| 10 | Dolce_墨 | [CodePen](https://codesandbox.io/p/sandbox/nifty-chaplygin-5mcswq) | 
|   11  |    610   | [CodePen](https://codepen.io/YI-LING-LIU/pen/bGXZeQB) | 
| 12 | Kaya | [CodePen](https://codepen.io/kayaribi/pen/ZEgPBeY) | 
| 13 |mercury2508.| [CodePen](https://codepen.io/Mercury2508/pen/eYqXzgE) |
|   14  |    Ariel   | [CodePen](https://codepen.io/ariel0510/pen/qBevjLg) |
|   15  |    Sonia   | [CodePen](https://codepen.io/YUJOU/pen/BaXbmeL) |
| 16 | yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/BaXbVwq) |
| 17 | Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/JjgzBPO) | 
| 18 |  JIA  | [CodePen](https://codepen.io/nzaicwlw-the-styleful/pen/GRVLREL?editors=0010) | 
| 19 |  Mike  | [CodePen](https://codepen.io/mike2049/pen/rNXbMVv?editors=1011) | 
| 20 |  joylu0902  | [CodePen](https://codepen.io/joylu0902/pen/qBewbvd) | 
| 21 |  嚼勁先生  | [CodePen](https://codepen.io/James520284/pen/zYgXROV) | 
| 22 |  是在哈囉  | [CodePen](https://codepen.io/miyxdhem-the-solid/pen/PoMgQOR?editors=1010) |
| 23 | Mos | [CodePen](https://codepen.io/mos25399/pen/LYwvBNe?editors=1010) |
| 24 | jerry_66983 | [CodePen](https://codepen.io/Barry-C/pen/PoMgRrw) | 
|25|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/qBewwPw?editors=1010)|
| 26 | Chun | [CodePen](https://codepen.io/Chun_debbie/pen/zYgXQjG?editors=1010) |
| 27 | Rogan | [CodePen](https://codepen.io/RoganHsu/pen/qBeGKga?editors=1010) |
| 28 | ycl325.etheddie | [CodePen](https://codepen.io/wdvikfuz-the-selector/pen/ZEgdpzL) |
| 29 | Joannehu | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/qBeGYLG) |
| 30 | Lotte | [CodePen](https://codepen.io/hmkdoxuj-the-decoder/pen/yLmdgEN?editors=1010) |
| 31 | 陳小廷 | [CodePen](https://codepen.io/ting1124/pen/QWeXQzB) | 
| 32 | JRz | [CodePen](https://codepen.io/JRZHENG/pen/BaXXKaz) | 
| 33 | ab567ab5 | [CodePen](https://codepen.io/WanTzu-Chiang/pen/eYqqzOa?editors=1010) | 
| 34 | Nocab | [CodePen](https://codepen.io/PeihanWang/pen/eYqqqQR?editors=1010) | 
|  35   |   chris    | [CodePen](https://codepen.io/chris-chenthe-selector/pen/gOVEPZX) | 
|  36   |   蘑菇星星    | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/QwLLpaw?editors=1111) | 
| 37 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/XJrremV)|
| 38 | Jack | [Codepen](https://codepen.io/kxbhixte-the-sasster/pen/dPbbmpG?editors=1010)|
| 39 | Seris | [Codepen](https://codepen.io/Dale-Chien/pen/jENNQOZ)|
| 40 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/dPbbdow?editors=1010)|
|  41  |   Emma    | [CodePen](https://codepen.io/Emma0919/pen/OPLJWmg) | 
|  42  |   charlottelee    | [CodePen](https://codepen.io/char849/pen/wBwvbdv) |
|  43  |   kaka_945    | [CodePen](https://codepen.io/kay945/pen/qEWBegX) |
|  44  |   KOMATSU PEI    | [CodePen](https://codepen.io/Komatsu2021/pen/MYgWNvg?editors=1011) |
|  45   |  alec1203     | [CodePen](https://codepen.io/soloayaya/pen/RwXXKZj?editors=1111) |
|  46   |  雪粒     | [CodePen](https://codepen.io/bzykdfhw-the-bashful/pen/ZYzYwxe) | 
|  47   |  Chuang    | [CodePen](https://codepen.io/uidoytjq-the-solid/pen/wBwVYPE?editors=1010) | 


<!-- 可複製下方格式
|     |       | [CodePen]() | 
-->