---
tags: JS 直播班 - 2023 秋季班
---
# 🏅 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) 將他們兩個的 成績數據 圖像化，已經知道圖像化後的結果如下圖：


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

> 成績數據
>
> 
>
> 可以參考：https://c3js.org/samples/timeseries.html

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


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

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

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

## 回報流程

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


<!-- 解答：

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

回報區
---

| Discord | CodePen / 答案 |
|:---------------------:|:----------------------------------------------------------------------------:|
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/ExrLvMa) |
| pinyi_9 | [CodePen](https://codepen.io/Wpypy/pen/NWoMaWO) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/eYxrGLd) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/mdvLBXj) |
| Moreene | [CodePen](https://codepen.io/Moreene/pen/abXGLrL) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/KKJRywz) |
| Eden | [Codepen](https://codepen.io/iseden/pen/gOqzXaJ) |
| stone4584 | [Codepen](https://codepen.io/Royen0506/pen/BaMxmYj) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/VwgxMpr?editors=0010) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/qBgYVoQ) |
| damon0323 |[CodePen](https://codepen.io/swk9eny2/pen/NWoMaLQ?editors=0010)|
| Uli |[CodePen](https://codepen.io/uli1313/pen/bGzMYLe?editors=1010)|
| 維哲 |[CodePen](https://codepen.io/kwz1202/pen/OJdZzbm)|
| claire |[CodePen](https://codepen.io/yi-wen-chen/pen/MWLGrpq)|
| celinelinnn |[CodePen](https://codepen.io/celinephoebe/pen/wvNjpMd)|
| yuan2781 |[CodePen](https://codepen.io/ismebir/pen/poGVWjm)|
| Yijing |[CodePen](https://codepen.io/Yi-Jing-71080635/pen/rNPvJaN?editors=1011)|
| runweiting |[CodePen](https://codepen.io/weiting14/pen/VwgzRYp)|
| Alyce |[CodePen](https://codepen.io/alycehwy/pen/yLZjKpX?editors=0010)|
|CPing|[CodePen](https://codepen.io/CPing/pen/rNPvdEr)|
| xin |[CodePen](https://codepen.io/Estherrrrrr999/pen/poGVLOr)|
| Helen |[CodePen](https://codepen.io/milkteamonster/pen/oNmddyb)|
| shuuu |[CodePen](https://codepen.io/afjrvjzl-the-bashful/pen/dyaeeKM)|
| kuanju27 |[CodePen](https://codepen.io/Eero-Chiao/pen/LYqmmbP)|
| ann6212 |[CodePen](https://codepen.io/yqmegupa-the-styleful/pen/mdvLKOX)|
| kawa |[CodePen](https://codepen.io/z83xji6/pen/vYbjjBE)|
| yu.t_liu |[CodePen](https://codepen.io/YuT200053/pen/oNmdMqm)|
| dora |[CodePen](https://codepen.io/dorayu/pen/QWYrOVp?editors=1011)|
| cest_jessie |[CodePen](https://codepen.io/itsjessiechen/pen/ExrLvJj)|
| 奔跑吧(GTR150) |[CodePen](https://codepen.io/Wer-Qwe/pen/XWOqxLM)|
| JUNEW |[CodePen]([xxx](https://codepen.io/June-W/pen/YzBLBbj))|
| tanuki5863 |[CodePen](https://codepen.io/tanuki320/pen/BaMxEZZ?editors=1111)|
| Peng |[CodePen](https://codepen.io/H-Peng/pen/RwvyXor)|
| lychee_kk |[CodePen](https://codepen.io/kakakala/pen/jOdKOrW?editors=1010)|
| Winnie |[CodePen](https://codepen.io/codepen-io-winnie/pen/zYeaYaW?editors=0010)|
| Allen |[CodePen](https://codepen.io/hlctw/pen/bGzMPzw?editors=1111)|
| ChrisSQR |[CodePen](https://codepen.io/ChrisSQR/pen/abXKObO)|
| 保羅 |[CodePen](https://codepen.io/paul-1997/pen/YzBvqje?editors=1011)|
| Ataraxia |[CodePen](https://codepen.io/ataraxia8888/pen/XWOZYQZ)|
| 郭芙蘭#6374|[CodePen](https://codepen.io/flora_Kuo/pen/gOqKGKK?editors=1011)|
| 郭芙蘭#6374|[CodePen](https://codepen.io/flora_Kuo/pen/WNPyXeV?editors=1011)|
| Fabio20 |[CodePen](https://codepen.io/fabio7621/pen/gOqKGqd)|
| 小夏 |[CodePen](https://codepen.io/michaelhsia/pen/QWYxJZE)|
| xuan |[CodePen](https://codepen.io/xuan0915/pen/OJdEryM?editors=0010)|
| MY |[CodePen](https://codepen.io/ahmomoz/pen/vYbrvrL)|
| santu0868 |[CodePen](https://codepen.io/HatsumiSan/pen/ZEwRdep)|
| Ching |[CodePen](https://codepen.io/tzuchingg/pen/XWOBJQG?editors=1010)|
| ⭐小正 |[CodePen](https://codepen.io/colorgolden/pen/ExrpjBg)|
| Oria |[CodePen](https://codepen.io/kajing/pen/mdvjwvg?editors=1011)|
|荷菓かのり|[CodePen](https://codepen.io/oogxwkvw-the-builder/pen/abXjxpj)|
| nini1202desu |[CodePen](https://codepen.io/tvxq5206/pen/XWOBLpK?editors=1010)|
| bf_tsai |[CodePen](https://codepen.io/BF-Tsai/pen/bGzxwbN?editors=1010)|
| macihuang |[CodePen](https://codepen.io/macy1215/pen/PoVdbNp)|
| hsu0921 |[CodePen](https://codepen.io/HSUANIN0327/pen/xxMaOrq)|
| Vivian2857 |[CodePen](https://codepen.io/vivian_lin/pen/LYqgEBX?editors=1011)|
| Jerry |[CodePen](https://codepen.io/ildkosxk-the-encoder/pen/VwgErrz?editors=0010)|
| Rochel |[Codepen](https://codepen.io/rochelwang1205/pen/vYbVqje)|
| 歐陽龍龍#1061 |[Codepen](https://codepen.io/dizzydog-rgb/pen/BaMqggv)|
| skypassion5000 |[Codepen](https://codepen.io/skypassion5000/pen/QWYJLwd?editors=0010)|
| Daylily |[Codepen](https://codepen.io/daylily/pen/zYeMQMM)|
| NathanJames |[Codepen](https://codepen.io/ufo060204/pen/xxMyRGm)|
|阿榮|[Codepen](https://codepen.io/codeitaday/pen/JjxxEEq)|
|sponge|[Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/wvNNbOK)|
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/mdvoeGE) |