技術類文章

C3.js 從0開始的座標軸

想直接看本文重點可以直接跳過前3小節喔!

為什麼會選 C3.js ?

最近在做畢業專題的時候，碰巧遇到需要將大量數據做資料視覺化的狀況，為此作為網頁資料視覺化小萌新的我，第一時間自然是到處找好用的API啦! 認真上網找才發現做資料視覺化的 js 函式庫其實蠻多的，最初我挑的是 D3.js，不過往後爬文之後，我發現 D3.js 真的不太容易上手，因為專題有時間壓力的關係，我轉向使用 C3.js 做資料視覺化。

基本上 C3.js 就是簡化許多的 D3.js，我們在使用 C3.js 的時候，也會需要把 D3.js 用 <script></script> 載入網頁後配合 C3.js 一起使用，雖然 C3.js 有點難做到高度客製化，但對於有資料視覺化迫切需求的人來說，C3.js 算是挺不錯的視覺化工具，如果之前有用過 Chart.js，那要上手 C3.js 更是如魚得水。

如何使用 C3.js ?

依照官方網站的說明，我們需要載入 c3.css、c3.js、d3.js 這3個東西，才能開始做資料視覺化。

小補充: min.js 檔跟一般 .js 檔的差異在於 min.js 檔去除讓程式碼易讀的縮排空格，把程式碼壓縮成更少行且檔案也更小，自然在載入速度上會比 .js 檔快一點。

1
2
3
4
5
6
7
<!--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 容易讓網頁程式碼顯得有些雜亂，想解決這個問題可以考慮使用 Webpack 這個打包工具，有興趣的話可以自行深入研究。

1
2
3
4
5
<!-- 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 下載，以下提供連結。

C3.js 的效果展示

以 line chart 為例 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.js"></script>
<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開始的座標軸

前面用3小節稍微介紹下 C3.js 後，終於要進入本文的正題啦!

當資料數據的最大值和最小值差距過大，y軸的數值刻度就有機會出現負數，像下面這個例子，data1 跟 data2 的數值差距過大導致 y 軸出現負值，即便在所有數據中均不存在負值。

1
2
3
4
5
6
7
8
9
10
11
<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 設成 0 看看，結果當然是無效囉! 仔細查資料後，我發現官方文件中的 axis.y.min 下面有補充一句話 : Padding will be added based on this value.，所以 y 軸會有負值出現就是因為 C3.js 自動設定 y 軸 padding 的關係。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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 設成 0 或比較小的數值就可以囉! 但我比較不建議直接設成 0，因為這樣連出來的線段會有機會直接貼到 x 軸上，使得整張圖看起來不太美觀，下面試著把 y 軸的 padding bottom 設成 5 就成功讓 y 軸從 0 開始囉!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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。

分享到