## 第三十關 C3.js 圖表整合

慘了，這次客戶希望用圖表呈現，**看看誰的完課率最好，同時可以看出排名**，

但小杰只有處理過折線圖，從來沒用過其他的圖表，於是禿頭俠告訴他，其實那位開發者，也是看這裡的[文件](https://c3js.org/examples.html)複製貼上來的。

小杰點了幾個範例全部都英文，覺得非常吃力，想當初高中大學整個被當到不行，但是點進去看到 Code 時，然後再搭配之前的範例，也稍微推敲出來一些概念，像是他就找到了這個[長條圖](https://c3js.org/samples/chart_bar.html)，突然靈光山一閃，好像可以用成下面的呈現方式：


**雖然想歸想，但是還是得拿掉些程式碼，再嘗試整合撰寫，一起幫幫小杰吧！**

## 問題

1. 請嘗試用 codepen 附上你的解答，這次的需求是「 用 c3.js 圖表顯示，看看誰的完課率最好，同時可以看出排名**」
2. 圖表不局限於上面的長條圖，也可尋找合適的圖
3. 週六日請嘗試寫一篇 blog，分享解題流程，讓其他人也可以受益

## blog 解決題目心得連結張貼處
1. [廖洧杰 BLOG 心得(範例貼文)](https://www.google.com.tw)
2. [JSP 筆記 - 陣列排序 Sort()與 C3.js 視覺資料處理](https://hsuchihting.github.io/javascript/20200715/679666643/)
3. [Vic 圖表整合過程](https://hackmd.io/@BcaQM8-AS9uLVmaEplMBZw/H1Wra_RJD)
4. [C3.js基本認識](https://hsuchihting.github.io/javascript/20200715/3292510004/)
5. [JS Day 30: C3.js Chart](https://williamafil.github.io/notes/)
6. [JS 學徒特訓班 30 C3.js 圖表整合筆記](https://hackmd.io/CGVAXBSeTACnlwkc9wB-ew)
7. [Sesame](https://www.notion.so/30-C3-js-869a8cc4e4264686b2f9808ff000956e)
8. [Thomas](https://medium.com/when-you-feel-like-quitting-think-about-why-you/2020-hexschool-js-%E5%AD%B8%E5%BE%92%E7%89%B9%E8%A8%93%E7%8F%AD-30-%E8%88%87-31-%E5%A4%A9-28dedd0162fb)
9. [Terry Yu](https://medium.com/@vic666v/2020-hexschool-js%E5%AD%B8%E5%BE%92%E7%89%B9%E8%A8%93%E7%8F%AD-31-35-days-8e780da81bed)
10. [Erica](https://hackmd.io/4rYt6CF9TMCmmFqPnF8Tig?view)
11. [sylviekuo](https://hackmd.io/@sylviekuo/B1Jr5wNgD)
12. [sylva](https://hackmd.io/@TTOyfkDYQymCYEZJTACb7w/S1KO4a7xP)
13. [liu](https://hackmd.io/@AsM1Por9RBKh07CWTRY5YQ/Bk01RUSew)
14. [Nate Yeh](https://medium.com/@a498390344/d3-js-c3-js%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-56ca4e2c88)
15. [Micro](https://hackmd.io/Q3VmVkI4RNSiTfigtoPviA?view)
16. [小儀](https://medium.com/coding-girl-life/js-60challenge-c3js-ca25e58c8f7c)
17. [Jack](https://www.notion.so/C3-js-80710531a3ac4c30955b73b58a8c881f)