C3.js

C3.js 是利用 D3.js 做出來的，一種站在巨人肩膀上的概念。使用它你可以輕鬆將資料轉成老闆、顧客一眼就能看到重點的圖表。使用時要先載入以下三支：

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.js"></script>

一開始我都直接滑到文章下面看 C3.js ，後來耐下性子從頭讀，才知道 D3.js 了解後繼續讀 C3.js ，比較不會在奇怪的地方卡住，更容易理解 C3.js 在銃蝦米。要換寫其他圖表種類時，也比較看得懂官網的範例。因此，強烈建議還未讀過昨天文章的人先回去讀 D3.js 。

C3.js 的架構雖然會隨著不同的圖有所改變，但其實大同小異。想要知道有哪些圖能使用的話，可以直接上官網清單搜尋，我們只會就幾個比較常見的圖表做介紹。

主架構

打開官網，點進你要的圖表，會看見它已列出寫法，只要換成你想要的資料其實就可以了。但如果要統整一下的話， C3.js 的起手式為 var chart = c3.generate({}); ，資料會用物件的方式放在 data{} 裡面，再用 columns 包住內含不同資料的陣列。用 type 指定你是要話折線圖、直線圖，還是圓餅圖等等。另外，更可搭配 setTimeout 、 onclick 等特殊動畫效果一起使用。

基本款：折線圖 line

因為比較複雜一點，我直接將寫法與重要步驟的註解列在下方。這是一張高屏人數歷年來變化的圖表：

var chart = c3.generate({ 
    bindto: '.chart', //圖要放在html裡的chart這個class中
    data:{ 
        columns:[ 
            ['高雄',30,200,100,150], //記得先放資料的名稱，再放資料數據
            ['屏東',40,500,300,200] //要畫好幾條線的話，就開另一個陣列來放，依此類推
        ],
        type:"line", //圖的種類是折線圖
        colors:{
            "高雄":'#000000', //設定高雄這條線顏色
            "屏東":'#ff0000' //設定屏東這條線顏色
        }
    },
    legend:{
        show:true //圖表下方顯示高雄和屏東的圖例(高雄xx色的線，屏東xx色的線)，也可選false不顯示
    },
    axis:{
        x:{ //x軸設定
            type:'category',
            categories:[1996,1997,1998,1999], //客製化x軸隔線怎麼寫，讓他一格寫1996，一格寫1997...依此類推
            label:{
                text:'年份', //x軸要打上x軸的名稱：年份
            }
        },
        y:{ //y軸設定
            label:{
                text:'人數', //y軸要打上y軸的名稱：人數
                position:'outer-middle', //這個名稱要放在y軸的哪裡
            }
        }
    }
});

除了上面使用的幾種設定，也可以運用以下來客製化圖表。

1. 調圖表高度：

size: {height: category.length *30, },

2. 讓軸線從直的轉成橫向：

rotated: true 

圓餅圖 pie

一樣是直接列出寫法與步驟註解，下面的圖表，是用圓餅圖秀出男女百分比。

var chart = c3.generate({
    bindto: '.chart', //圖要放在html裡的chart這個class中
    data:{
        columns:[
            ['男性',30], //男性30人
            ['女性',120] //女性120人
        ],
        type:'pie', //圖的種類是圓餅圖
        onclick:function(d,i){ //點擊圖時的效果
            console.log("onclick",d,i); //各自秀出男性20%、女性80%
        },
        onmouseover:function(d,i){ //滑鼠滑進圖的效果
            console.log("onmouseover",d,i); //各自秀出男性20%、女性80%
        },
        onmouseout:function(d,i){ //滑鼠滑出圖的效果
            console.log("onmouseout",d,i);
        }
    }
});

其中，d 就像前面講到 d3.js 時出現的一樣，會讓使用者在圓餅圖上對應位置看到如 data 30 的文字提示，i 則會回傳當下點擊的 object 如 {id:"目前進度",value:70,ratio:0.7,index:1,name:"目前進度"} 。

另外還能用 setTimeout 設定圖表跑的秒數，搭配 load 和 unload 讓圖表出現後消失，變成下一張圖表接續出現，接續上面的男女比程式碼，可以這樣寫：

//讓下一張年齡層圖表出現
setTimeout(function () {
    chart.load({
        columns: [
            ["21-40歲", 50], 
            ["41-60歲", 750],
            ["60歲以上", 300],
        ]
    });
}, 1500); //1.5秒

//讓上一張男女比例圖表消失
setTimeout(function () {
    chart.unload({
        ids: '男性'
    });
    chart.unload({
        ids: '女性'
    });
}, 1500); //1.5秒

setTimeout 的部分之後還會細講，敬請繼續鎖定系列文！那我們今天先講到這邊，晚安。

學習與參考資料

JS 學徒特訓班教學影片
六角學院 D3.js、C3.js 資料視覺化教學：https://www.youtube.com/watch?v=0PQ8VOsyjzw
JS 筆記 - C3.js 基本認識： https://hsuchihting.github.io/javascript/20200715/3292510004/
JSP 筆記 - 陣列排序 Sort()與 C3.js 視覺資料處理：https://hsuchihting.github.io/javascript/20200715/679666643/
[Hexschool JS60 Training] — 60天 JavaScript 學徒試煉 Day1-30：https://rexhung0302.github.io/2020/06/07/20200607/#Day30

特別感謝回答我疑惑的：
Tim Hsu
SeanLiu
William Kang