js學習60天-c3.js筆記

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

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

動手寫之前

六角的影片入門，了解c3.js是什麼

再看看官網範例，Bar Chart長怎樣
















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大大的手把手教學文

做作業前先照著Tim的教學練習一遍

一、起手式

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

因為要串api，也載入axios

https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js

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


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

二、寫入Javascript

任務:

這次要串的api是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在這

參考自Erica、Tim Hsu的技術文，非常詳細，值得一讀再讀