ETH官方钱包

前往
大廳
主題

C3.js 從0開始的座標(biāo)軸

冰抹茶拿鐵 | 2022-07-29 04:06:22 | 巴幣 2 | 人氣 392

(本文同步發(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。

創(chuàng)作回應(yīng)

相關(guān)創(chuàng)作

更多創(chuàng)作