---
tags: JS 直播班 - 2021 春季班
---
# 3/30 線上 Slack 助教
## 今日輪班助教時間
hsin-yu：3/30（二）
早上 10:00 - 中午 12:00，下午 1:00 -下午 5:00
## 發問規範
老師助教同學們好，**這是我的 Codepen**，我**原本預期**「JS 第 8 行會出現數字 8」，**但卻出現**「預期外的結果是 0」，想問下問題出在哪裡？
## 注意
1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊
## 問題
1. **Dora：**
老師助教同學們好，這是我的 [Codepen](https://codepen.io/ChiaLingShen/pen/gOgwwVe?editors=0010)，我印象中老師說可以修改 y 軸，但我看了c3.js 教學，並沒有看到可以修改 y 軸的部分，請問要如何修改 y 軸資料呢?
延續上面的問題，我想修改 js code 第 12 行及第 13 行，資料顯示的線條顏色，我使用開發者工具檢查，想說要找到對應的選取器來修改顏色，但我找不到阿，請問要如何修改資料線條的顏色呢?
> 助教回覆：
> 有的～修改圖表 y 軸可以參考 c3.js 的 Reference，左側選單可以找到 axis，有客製化 x 軸和 y 軸的範例，例如修改 y 軸文字可以參考 https://c3js.org/reference.html#axis-y-tick-values 自訂 y 軸的值
> 修改圖表顏色可以參考 https://c3js.org/reference.html#data-colors
在 data 屬性中設定 colors，這裡拿同學的 codepen 當範例修改線條顏色 （[JS 第 15 行](https://codepen.io/tina2793778/pen/LYxRMaZ?editors=1010)）
可以再嘗試設定看看～若有不清楚的地方歡迎再發問～
2. **Pei Wang**
老師助教同學們好，這是我的 [Codepen](https://codepen.io/wang-pei-shin/pen/LYxRvjE?editors=1010)
(js116)原本想將gauge()和innerHTML寫在一起跑forEach，先完成HTML的部分，再進行gauge()產生圖表。結果只有最後一個圖表正常，其他的不會顯示色塊百分比到多少。
將gauge()單獨挪出來寫後(js120-122)，圖表即能正常顯示，請問為什麼原先方法無法作用呢？
> 助教回覆：
> 因 forEach 跑圖表會有非同步的問題，因此加上 setTimeout 就可以寫在一起
```
function renderGauge() {
const successRate = document.querySelector(".successRate");
successRate.innerHTML = "";
groupSuccessArr.forEach(function (i) {
successRate.innerHTML += `
<li>
<h3>第${i[0]}組任務達成率</h3>
<div class="successRate${i[0]}"></div>
</li>`;
setTimeout(() => {
gauge(i[0], i[1]);
})
});
}
```
> 補充：
會先跑完 setTimeout 上面的程式，才進行 setTimeout 裡面的寫的程式 → 沒錯～
因為產生圖表有使用到遠端的資料所以會有非同步的情況喔
---
3. **Stacey Huang:**
老師助教同學們好，這是老師在第七周講義所附的 [BMI kata 投稿人數折線圖(時間序列折線圖)](https://codepen.io/hexschool/pen/eYgOBeN?editors=0010) 與[折線圖增加時間軸](https://codepen.io/hexschool/pen/dyNbvOb?editors=1010),這兩個都是使用折線圖,但BMI kata投稿人數折線圖有使用xFormat屬性而折線圖增加時軸沒有使用xFormat屬性。不懂甚麼時候該使用xFormat屬性。
另外,當我刪掉BMI kata投稿人數折線圖xFormat屬性,圖表變得很奇怪。雖然官網上有說'xFormat' can be used as custom format of 'x'但我還是不是很清楚xFormat屬性的用途。
> 助教回覆：
> xFormat 屬性主要是為了將帶入的資料 "2021/3/10" 自訂日期格式，才能正確轉成 date 物件顯示在圖表上（"2021-3-10" 的格式可以正確轉為 date 物件，因此不需再設定 xFormat 屬性）
BMI kata 投稿人數折線圖刪掉 xFormat 屬性後，因為無法正確將日期的字串 "2021/3/10" 轉成 date 物件，因此會出錯
可以參考這兩篇討論：
https://stackoverflow.com/questions/32642089/c3-js-timeseries-with-time-fails-to-parse
https://stackoverflow.com/questions/32946646/c3-js-how-to-specify-the-timestamp-format-when-plotting-timeseries-taken-from
兩個作用不同，xFormat 是用來轉換日期格式， axis 中的 format 是用來設定顯示的部分
```
xFormat: ‘%Y-%m-%d %H:%M:%S’, // how the date is parsed
axis: {
x: {
type: ‘timeseries’,
tick: {
format: ‘%Y-%m-%d %H:%M:%S’ // how the date is displayed
}
}
}
```
> xFormat [範例](https://codepen.io/tina2793778/pen/poRNMQZ?editors=0011)
假設帶入的 x 軸資料是
[‘x’, ‘2013’, ‘2014’, ‘2015’, ‘2016’, ‘2017’, ‘2018’],
就需加上 xFormat 屬性
xFormat: ‘%Y’
才能正確顯示在圖表上
謝謝助教的回覆,也就是說當所帶入的日期不能轉成date物件的格式時,就必須使用xFormat,轉成date物件格式。想再請問一下,要如何得知所帶入的日期是否能夠正確地轉換成date物件格式呢? 是否使用以下方法呢?看到助教提供的討論中有提到這個方法。
new Date('帶入日期時間').toISOString();
謝謝:)
>助教回覆：
>這裡要修改一下上次的回覆，應該是原本的日期時間字串都是可以轉換成 Date 物件的，但是目前只知道有 2021-03-10 這種格式可以正確讀取，因此可以都先將拿到的資料 日期格式改成這樣（yyyy-mm-dd）來推入
如果是其他格式還是建議搭配 xFormat 就可以更快速的讓日期轉換為統一的格式
這樣就不需驗證是否可以正確讓 c3 轉換～
同學貼的方法
`new Date('帶入日期時間').toISOString();`
因原本的日期字串也可以轉為 Date 物件，因此用上方的方法無法驗證是否可以讓 c3 這邊正確讀取
4. **Fred Chang:**
老師助教同學們好，這是穎旻助教第六週助教分享的 [Codepen](https://codepen.io/AliceChiang/pen/OJbqyxv)，想請問關於JS的第62行if(!location) 的意思是什麼? 是為了讓if判斷為true執行內容嗎? 自己查資料時有查到關於[Logical NOT](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_NOT)，不確定是不是這個用法，如果是的話也不太明白為什麼是這樣寫，還請助教協助解答，謝謝!
> 助教回覆：
> ! 是同學查到的用法沒錯喔～
因篩選地區時如果 render 函式的 location 值是 undefined 或 "" ，和 false 一樣被定義成假值（代表「沒有」的意思，可以參考這篇[說明](https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy)：除 false、0、""、null、undefined 和 NaN 以外皆为真值）
>如果 location 是有值的（例如："台北" ）那 if (location) 就會是 true
如果 location 是 undefined 或 "" ，那 if (!location) 就會是 true，
第 143 行 render(areaSelect.value);，areaSelect.value 的值不是台北、台中、高雄，就不需篩選出地區，因此可以直接 return
Jordan 同學回覆的是沒錯的哩，感謝同學的支援～～
（這裡只能由助教自行增加問題，請大家將問題放在 thread 上）
Sign in with Wallet
Connect another wallet