---
# System prepended metadata

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

---

# 🏅 Day 27 - 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 程式碼應該如何撰寫？


<!-- 解答：  

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