2020 HexSchool JS 學徒特訓班-30 與31 天
Published in
3 min readJul 20, 2020
第三十關 C3.js 圖表整合
慘了，這次客戶希望用圖表呈現，看看誰的完課率最好，同時可以看出排名，但小杰只有處理過折線圖，從來沒用過其他的圖表，於是禿頭俠告訴他，其實那位開發者，也是看這裡的文件複製貼上來的。
小杰點了幾個範例全部都英文，覺得非常吃力，想當初高中大學整個被當到不行，但是點進去看到 Code 時，然後再搭配之前的範例，也稍微推敲出來一些概念，像是他就找到了這個長條圖，突然靈光山一閃，好像可以用成下面的呈現方式：
雖然想歸想，但是還是得拿掉些程式碼，再嘗試整合撰寫，一起幫幫小杰吧！
在C3.js 中有不少可以使用的圖表呈現方式，此次我使用 圓餅圖來製作。
我想呈現的圖餅圖為區分 5 個不同範圍的區間 例如: 0% ~20% 、21% ~ 40% … 等等。它的資料結構為以下:
將 api 中的資料先經由排序後一一篩選至不同的陣列中。
再經由 C3.js 宣染出來。
第三十一關 部落格文章閱讀 -表達感謝之意~
在這個週末真的卡關很久，因為第一次使用 C3.js 以前從來沒有了解過，在這裡幸好有 HexSchool - JS 學徒特訓班的同學分享文才有學習到新的技能，在這裡先感謝 @Yu Wen Wang、@TimCodingBlog提姆寫程式 、@Yu Wen Wang，有這些分享文才讓我的進度向前一大步。
***如果有任何想法，也歡迎留言與我分享~
***也謝謝你(妳)的閱讀，覺得有幫助的話別忘了順手拍個手喔！***
