# 第三十關：C3.js 圖表整合
###### tags: `JS新手特訓班`

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

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

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


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

---

## 問題

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

### 答案
- [第30關 Codepen](https://codepen.io/mio514/pen/RwrmQyg)
- [[JS學徒特訓班]C3.js 基本認識與圖表整合](https://medium.com/coding-girl-life/js-60challenge-c3js-ca25e58c8f7c)

var url ="https://raw.githubusercontent.com/hexschool/hexschoolNewbieJS/master/data.json";
var data = [];
var nameList =[];   //參賽者姓名
var completion = ["完成率"];   //參賽者完成率

//取得資料
axios.get(url).then((res) => {
  data = res.data;
  sortData();
}).catch((error) => {
  console.log('資料錯誤', error);
});

//處理資料
 function sortData () {
  //根據完成率將資料排序
  data.sort(function(a,b){
    return parseInt(b.process) - parseInt(a.process);
  });
  //排除完成率為 0的參賽者
  data.forEach(function(item) {
    var isProcess = parseInt(item.process);
    if ( isProcess !== 0 ) {
        completion.push(isProcess)
        nameList.push(item.name)
    };
  });
  render(completion, nameList); 
 };

//繪製圖表
function render (completion, nameList) {
  var chart = c3.generate({
    data:{
      columns:[completion],
      type: 'bar',
      colors: {
        完成率: "#ffb300"
      }
    },
    axis:{
      rotated: true,  //旋轉圖表
      x: {
        show: true,               // 顯示 X 軸
        type: "category",         // X 軸資料類型
        categories: nameList,     // X 軸需顯示的資料
        tick: {
          multiline: false      // 顯示換行設定
        },
        label: {
          text: "參賽者姓名",
          position: "outer-center"
        }
      },
      y: {
          show: true,               // 顯示 Y 軸 
          max: 100                  // Y 軸資料最大值
      },
    },
    size: {
      height: completion.length * 45, //調整圖表高度
      width: 1024
    },
  });
  // console.log(completion);
  // console.log(nameList);
};

---

### 同學的各種解法
* [Nate Yeh](https://codepen.io/hellokiddingtw/pen/MWKPzjP)
* [William Kang](https://codepen.io/william_k/pen/LYGXLeV)
* [Erica](https://codepen.io/kaoru44689/pen/jOWXPxM)
* [Tim Hsu](https://codepen.io/tim_hsu/pen/GRoXdgY)

---

### [blog 解決題目心得連結張貼處](https://hackmd.io//Vp1FRGPMRymM7FOxaQ_srQ)

### 參考資料
1. [C3.js基本認識](https://hsuchihting.github.io/javascript/20200715/3292510004/)
2. [JS 學徒特訓班 30 C3.js 圖表整合筆記](https://hackmd.io/CGVAXBSeTACnlwkc9wB-ew)
3. [第30關 - C3.js 圖表整合](https://www.notion.so/30-C3-js-869a8cc4e4264686b2f9808ff000956e)
4. [C3.js 資料圖表](https://hackmd.io/4rYt6CF9TMCmmFqPnF8Tig?view)