###### tags: `JS學徒特訓班`
# Day31 部落格文章閱讀後心得
個人是比較喜愛，[**Tim Hsu**](https://hsuchihting.github.io/javascript/20200715/679666643/) 及 [**Erica**](https://hackmd.io/4rYt6CF9TMCmmFqPnF8Tig?view) 所撰寫的文章，講解的都很詳細，也能啟發我一些想法及實作。

# Day30 完成之路
Day30 有說需要撰寫一篇心得文，真是讓人頭大呀！由其是本身就沒有在撰寫BLOG的習慣，這樣子的要求，說實在真的是考驗如何在短時間內，撰寫出擁有一定程度的文章，就把Day30的解決題目心得跟觀看別人解題的文章撰寫成一篇。

## 看到題目時的心情
當看到 Day30 的題目時，我是一整個傻掉的，畢竟...就算躲的了一時，也躲不了一輩子，老天爺想要你學習的東西，就算你一時PASS了，之後還是會遇到。

## 思考解答
淯杰老師很好心的提供了大家一條思路，使用 BarChart 來解決 Day30 的要求，但這過程，卻讓我一邊撰寫時一邊無法接受我所撰寫的結果，最後在我一邊看著官網的文件，一邊嚐試各個功能終於也生出了一版，是自己可以接受的版本了:heart:。

## 過程考驗
在處理的過程中當生出了第一版本後就發現到有一些地方想要去優化它
- Q1：為什麼完成度的刻度是只有到 60，我想要顯示到 100
- Q2：我想要在每一位學徒的進度條上顯示個人目前的進度

//Q1 解法
labels: {
    format: {
      '完成率': function(v, id, i, j) { 
          return v + '%'; //這裡先知道 v 是我們圖表中y軸的資料值
      }
    }
}

//Q2 解法
//需要在 axis 加上下列語法
y: {
    max: 90, // 這是用來設定要顯示最大刻度為多少
},

- Q3：想要在最上面增加進度條

//需要在 axis 加上下列語法
y2: {
    default: [0, 100], // 這是用來設定刻度區間值為 0 ~ 100 
},

Q4：為什麼我無法插入 **完成率** 到 **columns** 中
在撰寫的過程中，當我把資料組好了，卻發現了為什麼，我的y軸沒有顯示完成度，而是資料第1筆值；查了文件後才發現，我少在資料集中的第1筆提供了要顯示的文字；所以我就打算在 handleData 處理完資料後再使用 **陣列提供的方法 unshift** 來將'完成率'插入到陣列的第 1 筆。撰寫後卻發現一直無法順利讓畫面將圖表渲染出來，後來才發現是因為 map 後的資料型態是 **Object** 而不是 **Array**，解法在餵 Google 後得知可以使用 Object.values 來處理。

**[Day30 完成品](https://codepen.io/tobedesigner/full/GRoYJoR)**

## 心得
經過 Day30 的洗禮，也算是有學到一點點 **[C3](https://c3js.org/reference.html)** 的皮毛吧(？)，後續就算又需要用到 C3 我相信我還是必須一邊看著官網文件，一邊思考如何處理要求...。

學習真的是一條不歸路，加入了**JS學徒特訓班**後自己對自己開了一些坑(使用MarkDown語法並記錄這60天的過程、重新溫習犀牛書、~~加加減減學習HTML、CSS~~)，說到HTML及CSS，看著一些人的畫面，真是讓我好羨慕呀！這就是前端的魅力！好看的畫面就是吸睛...

## 大家推坑項目
- PUG
- SCSS

大家都一直在推坑呀！我是不是誤入了什麼地方...末完待續...