(本文同步發(fā)表於 iT 邦幫忙)
ps. 想直接看本文重點可以直接跳過前3小節(jié)喔!
為什麼會選 C3.js ?
最近在做畢業(yè)專題的時候，碰巧遇到需要將大量數(shù)據(jù)做資料視覺化的狀況，為此作為網(wǎng)頁資料視覺化小萌新的我，第一時間自然是到處找好用的API啦! 認(rèn)真上網(wǎng)找才發(fā)現(xiàn)做資料視覺化的 js 函式庫其實蠻多的，最初我挑的是 D3.js，不過往後爬文之後，我發(fā)現(xiàn) D3.js 真的不太容易上手，因為專題有時間壓力的關(guān)係，我轉(zhuǎn)向使用 C3.js 做資料視覺化。
基本上 C3.js 就是簡化許多的 D3.js，我們在使用 C3.js 的時候，也會需要把 D3.js 用 <script></script> 載入網(wǎng)頁後配合 C3.js 一起使用，雖然 C3.js 有點難做到高度客製化，但對於有資料視覺化迫切需求的人來說，C3.js 算是挺不錯的視覺化工具，如果之前有用過 Chart.js，那要上手 C3.js 更是如魚得水。
如何使用 C3.js ?
依照官方網(wǎng)站的說明，我們需要載入 c3.css、c3.js、d3.js 這3個東西，才能開始做資料視覺化。
小補(bǔ)充: min.js 檔跟一般 .js 檔的差異在於 min.js 檔去除讓程式碼易讀的縮排空格，把程式碼壓縮成更少行且檔案也更小，自然在載入速度上會比 .js 檔快一點。
| <!--Reference: https://c3js.org/gettingstarted.html--> <!-- Load c3.css --> <link href="/path/to/c3.css" rel="stylesheet"> <!-- Load d3.js and c3.js --> <script src="/path/to/d3.v5.min.js" charset="utf-8"></script> <script src="/path/to/c3.min.js"></script> |
我自己是比較懶得去載上面那些東西到專案資料夾下，所以使用的是 CDN 載入，像下面這樣。但我必須說用 CDN 載入不是好作法，因為過多的 CDN 容易讓網(wǎng)頁程式碼顯得有些雜亂，想解決這個問題可以考慮使用 Webpack 這個打包工具，有興趣的話可以自行深入研究。
| <!-- Load c3.css --> <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.css" rel="stylesheet"> <!-- Load d3.js and c3.js --> <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> |
如果真的想載上面的東西下來看的話，可以到官方的 GitHub repository 下載，以下提供連結(jié)。
C3.js 的效果展示
以 line chart 為例 :
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="chart"></div> </body> <!-- Load c3.css --> <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.css" rel="stylesheet"> <!-- Load d3.js and c3.js --> <script src="">https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.js"> <script src="">https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.js"> <script> var chart = c3.generate({ bindto: '#chart', data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ] } }); </script> </html> |
從0開始的座標(biāo)軸
前面用3小節(jié)稍微介紹下 C3.js 後，終於要進(jìn)入本文的正題啦!
當(dāng)資料數(shù)據(jù)的最大值和最小值差距過大，y軸的數(shù)值刻度就有機(jī)會出現(xiàn)負(fù)數(shù)，像下面這個例子，data1 跟 data2 的數(shù)值差距過大導(dǎo)致 y 軸出現(xiàn)負(fù)值，即便在所有數(shù)據(jù)中均不存在負(fù)值。
| <script> var chart = c3.generate({ bindto: '#chart', data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250, 2500], ['data2', 50, 20, 10, 40, 15, 25, 300] ] } }); </script> |
看過官方文件後，我試著直接把 y 軸的 min 設(shè)成 0 看看，結(jié)果當(dāng)然是無效囉! 仔細(xì)查資料後，我發(fā)現(xiàn)官方文件中的 axis.y.min 下面有補(bǔ)充一句話 : Padding will be added based on this value.，所以 y 軸會有負(fù)值出現(xiàn)就是因為 C3.js 自動設(shè)定 y 軸 padding 的關(guān)係。
| <script> var chart = c3.generate({ bindto: '#chart', data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250, 2500], ['data2', 50, 20, 10, 40, 15, 25, 300] ] }, axis: { y: { min: 0 } } }); </script> |
那要如何解決這個問題呢? 我們只要主動把 y 軸的 padding bottom 設(shè)成 0 或比較小的數(shù)值就可以囉! 但我比較不建議直接設(shè)成 0，因為這樣連出來的線段會有機(jī)會直接貼到 x 軸上，使得整張圖看起來不太美觀，下面試著把 y 軸的 padding bottom 設(shè)成 5 就成功讓 y 軸從 0 開始囉!
| <script> var chart = c3.generate({ bindto: '#chart', data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250, 2500], ['data2', 50, 20, 10, 40, 15, 25, 300] ] }, axis: { y: { min: 0, padding: { bottom: 5 } } } }); </script> |
好久沒寫文章，趁著暑假是時候該練練了XDD。
