# js學習60天-c3.js筆記

碰新東西前總是有許多檻要過，心裡總是會這樣想:「又是新東西，好像很難......」，但腳已經跨一半了，怎麼樣也想要走完60關呀。

以此鼓勵自己看到新東西不要怕，慢慢拆開研究，首先就先看看別人怎麼做吧！
## 動手寫之前

> [六角的影片入門，了解c3.js是什麼](https://www.youtube.com/watch?v=0PQ8VOsyjzw)

> [再看看官網範例，Bar Chart長怎樣](
https://c3js.org/examples.html)

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
        }
        // or
        //width: 100 // this makes bar width 100px
    }
});

> [拜讀Tim大大的手把手教學文](https://hsuchihting.github.io/javascript/20200715/3292510004/)

> [做作業前先照著Tim的教學練習一遍](https://codepen.io/sylviekuo/details/qBbLgbP)

## 一、起手式

先載入所需CDN，由於 C3 是基於 D3 延伸的框架，所以需要先載入 D3

* https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js
* https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.min.js
* https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.css

因為要串api，也載入axios
* https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js

接下來在html插入div放圖表，初始設定差不多就完成了

<div id="chart"></div>

## 二、寫入Javascript

### 任務:
這次要串的[api](https://raw.githubusercontent.com/hexschool/hexschoolNewbieJS/master/data.json)是js學徒班的闖關完成率，想要做一個橫軸Ｘ呈現完成率，縱軸Ｙ學員名字的圖表。

> 先寫出一個待放資料的空陣列

const processList = [];  // 完成率
const nameList = [] ;   // 參加者名單

### 插入所需資料

axios.get(url).then((response) => {
    data = response.data;
    sortData(data);
    render(processList,nameList);
}).catch(err => {
    console.log(err);
});

### 整理資料

function sortData(){
  data.sort((a, b) => parseInt(b.process) - parseInt(a.process)) //完成率資料排序，多到少
  data.forEach((item) => {
    processList.push(parseFloat(item.process) ); //把完賽率資料推到processList[]中，忽略小數點
    nameList.push(item.name); //把參賽者資料推到nameList[]中
  });
}

### c3.js圖表畫面處理
主要佈局

function render (){
    var chart = c3.generate({
        bindto: "#chart",
        
        data: {
            columns: [
                processList
            ],           //主資料
            type: 'bar', //選擇chart類型
            colors:{
            },
        },
        
        size: {
            height: processList.length * 35, //調整長條圖距離
            width: 1000
        },      
        axis;{
        },
    })
}

軸axis的設定

axis: {
            rotated: true,//這邊做反轉，才會得到我們想要的Ｘ軸是完成率、Y軸名字
            x: {
                show: true,
                type: "category",
                categories: nameList,
                label: {
                    text: '參加者名單', //加入標籤名稱
                    position: 'outer-middle' //標籤位置
                },
                tick: {
                    multiline: false
                } 
            },
            y: {
                show: true,
                max: 100,
            },
        }

至於Ｙ軸的完成率，因為是主要顯示的資料，所以要回頭寫在一開始準備的空陣列中，這樣就可以正確顯示標籤文字。

const processList = ['完成率%']

最後設定主資料data內樣式顏色

colors: {'完成率%': '#aadddd',}

## 噢噢噢終於完成了啦 [完整codepen在這](https://codepen.io/sylviekuo/pen/gOPZNPb?editors=1011)

---
> 參考自[Erica](https://hackmd.io/4rYt6CF9TMCmmFqPnF8Tig?view)、[Tim Hsu](https://hsuchihting.github.io/javascript/20200715/679666643/)的技術文，非常詳細，值得一讀再讀