---
# System prepended metadata

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

---

---
tags: JS 直播班 - 2022 秋季班
---
# 🏅 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 / 答案                                |
|:---------------------:|:----------------------------------------------------------------------------:|
|       yumy#1940       |              [CodePen](https://codepen.io/yumyyang/pen/YzvrrMK)              |
|       Wei#2330        |     [Codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/mdKBBNe)      |
|       Peng#9811       |              [CodePen](https://codepen.io/peng-027/pen/OJExxKR)              |
|      albee#9121       |      [Codepen](https://codepen.io/albee-chang/pen/mdKBBZe?editors=1010)      |
|     AuroraC#6539      |        [codepen](https://codepen.io/AuroraC/pen/QWxqOWq?editors=1111)        |
|       Data#9297       |             [codepen](https://codepen.io/kirakira72/pen/vYreePY)             |
|      Clara#1275       |              [CodePen](https://codepen.io/bsupixqu/pen/PoaJOWp)              |
|     kenki100#0068     |               [Codepen](https://codepen.io/ken100/pen/OJExOMW)               |
|       m_m#5493        |             [CodePen](https://codepen.io/minnn7716/pen/zYaEPEQ)              |
|      楓之聲#6945      |             [Codepen](https://codepen.io/sshane258/pen/ZERXarw)              |
|       薯餅#3581       |           [Codepen](https://codepen.io/ColdingPoTaTo/pen/NWzawXy)            |
|      JackC#0411       |              [codepen](https://codepen.io/key0329/pen/XWYezEw)               |
|     CloThEs#0411      |              [Codepen](https://codepen.io/CloThEsZ/pen/bGKoYvL)              |
|    出事了阿伯#9923    |            [Codepen](https://codepen.io/BradpittLai/pen/ZERXXZo)             |
|       威爾#1694       |              [CodePen](https://codepen.io/WILL_Wu/pen/yLEzPgq)               |
|     mandylai#4055     |            [CodePen](https://codepen.io/mandy-lai-2/pen/zYaEPKb)             |
|      yawun#0042       |             [CodePen](https://codepen.io/monicalin/pen/PoaJOEj)              |
|       小白#2406       |             [CodePen](https://codepen.io/gracewhite/pen/MWXEvWN)             |
|      amy芳#1385       |             [CodePen](https://codepen.io/amy-chieng/pen/QWxqaLz)             |
|      Yishan#4902      | [CodePen](https://codepen.io/gdjrehhw-the-animator/pen/ExRwbMa?editors=1010) |
|      黑白兔#0684      |             [CodePen](https://codepen.io/johnny329/pen/vYreWMm)              |
|    hsiung阿熊#4079    |             [Codepen](https://codepen.io/hsiungchi/pen/mdKBpwL)              |
|   William Lai#0196    |             [Codepen](https://codepen.io/lai-weihan/pen/ExRwoWy)             |
| 軟綿綿 (๑•ᴗ•๑) ♡#3627 |     [CodePen](https://codepen.io/Connie-Chien/pen/abKLEyB?editors=0010)      |
|    LHchien33#6232     |             [CodePen](https://codepen.io/lin_chien/pen/ZERXvzg)              |
|       RJRS#9430       |                [CodePen](https://codepen.io/RJRS/pen/KKeXZbp)                |
|      肉桂卷#0625      |        [CodePen](https://codepen.io/ginnlee/pen/qBKPpMP?editors=0011)        |
|    JustinLiu#9699     |             [CodePen](https://codepen.io/justin0227/pen/ZERXvMW)             |
|   jacky010080#0880    |           [CodePen](https://codepen.io/Yen-Jung-Chen/pen/bGKoLpN)            |
|       圈圈#4060       |         [codepen](https://codepen.io/wjejfczn-the-bold/pen/LYrzOOV)          |
|      Winnie#1306      |           [Codepen](https://codepen.io/WinnieWuWinnie/pen/abKLqBY)           |
|      azami#5986       |               [Codepen](https://codepen.io/azami/pen/abKLqLK)                |
|       柔柔#1716       |        [Codepen](https://codepen.io/rouchen/pen/dyKVdRw?editors=1010)        |
|       威0#6919        |      [codepen](https://codepen.io/n0918679182/pen/vYredRq?editors=1010)      |
|       大衛#4869       |       [codepen](https://codepen.io/exnsrpjc/pen/mdKBqoM?editors=1011)        |
|    jimmyFang#9575     |              [codepen](https://codepen.io/pohxiqqo/pen/YzvreLb)              |
|    Potatolee#7749     |             [codepen](https://codepen.io/potatoleee/pen/bGKoLMe)             |
|     PayRoom#8328      |             [CodePen](https://codepen.io/water38198/pen/poKWaVw)             |
|    shinyhung#3825     |       [CodePen](https://codepen.io/sean_1215/pen/ExRwQbL?editors=1010)       |
|       kuku#3118       |      [Codepen](https://codepen.io/mengting-ku/pen/KKeXowZ?editors=1010)      |
|      Hilda#7085       |         [codepen](https://codepen.io/vwquikad-the-vuer/pen/MWXEVgG)          |
|     beta lin#1445     |              [CodePen](https://codepen.io/linbeta/pen/eYKGVqK)               |
|     WEI_RIO#9342      |        [codepen](https://codepen.io/wei_wu/pen/GRGMyVz?editors=1010)         |
|       mou#2215        |            [codepen](https://codepen.io/shihchiehlan/pen/mdKBXay)            |
|    Yuna Huang#2692    |       [codepen](https://codepen.io/Yuna1002/pen/MWXEVJq?editors=1010)        |
|     banazita#5143     |              [CodePen](https://codepen.io/banazita/pen/eYKGMLo)              |
|    勁辣雞腿寶#5817    |             [Codepen](https://codepen.io/orz311013/pen/RwJLMZG)              |
|        Rr#2215               |      [Codepen](https://codepen.io/rufangcheng/pen/poKWVdz)                                                                        |
|       Vera#5592       |               [CodePen](https://codepen.io/skvera/pen/gOKGzzB)               |
|      Cookie SSS#6991    |               [CodePen](https://codepen.io/sqhjikpa-the-selector/pen/YzvrvQg?editors=1010)               |
|王懷英#7271|[Codepen](https://codepen.io/huaiying/pen/gOKGKGY)|
|   Ruby Chen#7452    |             [Codepen](https://codepen.io/ruby92429/pen/GRGMGBR?editors=1010)              |
|masterYan#2480|             [Codepen](https://codepen.io/htzwgoqt-the-looper/pen/PoaJarN?editors=1010)
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/gOKGjjR)|
|鑫鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/dyKVqZV?editors=0010)|
|Barret#1119|[CodePen](https://codepen.io/barret0720/pen/QWxqOoZ?editors=0011)|
|雷雷#7844|[CodePen](https://codepen.io/lei-yi-jie/pen/qBKPJQL?editors=1010)|
|Hironaka#7367|[CodePen](https://codepen.io/Hironaka0815/pen/BaVwMdy)|
|Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/eYKGXZL?editors=1010)
|無名#6427|[codepen](https://codepen.io/Nomoney/pen/zYaEbMg)
|hannahTW#2224|[codepen](https://codepen.io/hangineer/pen/RwJjrQQ)
|Loran#1105|[codepen](https://codepen.io/loranlin/pen/abKLqyG?editors=1011)
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/ZERyLoY) |
| suihsilan#9485 | [CodePen](https://codepen.io/suihsilan/pen/MWXOyWe?editors=1010) |
| Ron Liang#7277 | [CodePen](https://codepen.io/ron-go/pen/vYrWGvq) |
|Lucie#3831|[Codepen](https://codepen.io/bisespei/pen/VwdraqN)|
|charlottelee849#0366|[Codepen](https://codepen.io/charlotte-lee/pen/VwdrmqN?editors=0011)|
|粉蒸肉#6214|[codepen](https://codepen.io/wrightyu/pen/KKeZbQr?editors=1111)|
|yoyo#1003|[codepen](https://codepen.io/pen/bGKYXxQ)|
|末次#0236|[codepen](https://codepen.io/yunjulee/pen/RwJLjJp)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/ZERremN?editors=1010) |
| Baozi#2042 | [CodePen](https://codepen.io/lillianyu/pen/JjZpJwx) |
| Shuo#1596 | [CodePen](https://codepen.io/chiangchungshuo/pen/eYKVbVx) |
|IreneY#0086|[codepen](https://codepen.io/HalfPlannedJourney/pen/MWXQqxx)|
| yoshidc#0455 | [CodePen](https://codepen.io/yoshiyyc/pen/zYaRRNq) |
| Chung#5951 | [CodePen](https://codepen.io/yuju16/pen/oNyqXEe) |
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/XWYEbwp)|
|Amberhh#2465| [codepen](https://codepen.io/Amberhh/pen/JjZrOxG) |
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/KKeoqxa?editors=1010)
|Paul#7426|[CodePen](https://codepen.io/paul-1997/pen/NWzYZOG?editors=0011)|
|kevin#6131|[CodePen](https://codepen.io/xlqjezvc-the-encoder/pen/rNKvBbx?editors=1011)|
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/zYaWqmK?editors=1010)|
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/MWXGoWY)|
| Eileen#6454 |[Codepen](https://codepen.io/Eileen-io/pen/ExRLood)|
|黑松胖#4836|[Codepen](https://codepen.io/yi-chien-hsieh/pen/GRGGRdw?editors=0010)|
|kancheng#3915|[CodePen](https://codepen.io/kancheng/pen/abKKdmG)|
|竹輪#3335|[CodePen](https://codepen.io/chikuwa0120/pen/qBKKVqr)|
|予予#9627|[CodePen](https://codepen.io/kiqzcraa/pen/JjZZQXK?editors=1010)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/JjZZgam?editors=1010)|
|郭芙蘭 #6374|[Codepen](https://codepen.io/flora_Kuo/pen/mdKjVEv?editors=1010)|
|Judy Wei#6103|[Codepen](https://codepen.io/Judy0718/pen/xxzjQZg)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/XWYPMNN?editors=1010)|
|Cynthia1111#1822|[Codepen](https://codepen.io/Cynthia1111/pen/RwJYpdO)|
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/RwJQxVG?editors=1010)|
|狸貓#5863|[CodePen](https://codepen.io/tanuki320/pen/YzvRBMM)|
|Mia#小福|[CodePen](https://codepen.io/a0950271/pen/ExRMwbK?editors=1010)|
|hungya#0773|[CodePen](https://codepen.io/hungya777/pen/QWxoXry?editors=0010)|
|  cbs#9007  |[Codepen](https://codepen.io/wasdjk/pen/GRGaEWG)|
|  阿蘇#8531  |[Codepen](https://codepen.io/susu3131/pen/WNyVRJY?editors=1010)|
|  蓁心#6229  |[Codepen](https://codepen.io/tlorfrnl-the-typescripter/pen/mdjbMjz?editors=1010)|
|Bingsu#2362|[Codepen](https://codepen.io/pmyfr/pen/NWOPZYP?editors=1010)|


