C3.js基本使用方法

這一周六角學院 JS 直播班教的是 C3.js 這個畫圖表的套件。

對於一個畫圖表快二十年的人，看到這個套件感到很親切。不同於手工畫的圖表，C3.js可以透過程式把資料帶入，只要資料更新，圖表也同步更新。

其實我也使用過另外一套圖表套件 Chart.js，那是在前公司結束前，做了一個 COVID-19 的網頁，裡面圖表就是用 Chart.js 做的，那時還不會串 API ，也不會篩選資料，每天都用手動把資料更新，真的很傻B！

誠如老師講的，不用真的把文件整個看過才會用，基本上只要抓住一些設定的要點，就可以做出還不錯的圖表。以下就整理了一些我試過可行的設定，方便未來要用時，可以快速上手：

導入方法

在HTML中插入以下程式碼：

  • CSS要放在自己寫的CSS之前。
  • 透過CDN抓進來使用的 d3.js 與 c3.js 也要放在自己寫的 JS檔之前。
<link rel="stylesheet" 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>

曲線圖 Line Chart

基本上套件就是一個物件，而所有的圖表的資料與外觀都在 generate 這個屬性的函式參數裡面設定。而 generate 函式的參數也是一個物件。

可以透過 bindto 這個屬性把圖表綁定到 HTML 的 DOM 元素上。 

var chart = c3.generate({
  bindto: ".chart",
  data: {
    // x 是設定 x 軸刻度的格式與數據
    x: "date",
    columns: [
      //"date" 綁定到 x 屬性的值"date" ，日期是字串格式
      ["date", "2021-11-21", "2021-11-22", "2021-11-23", "2021-11-24"],
      //資料部分，可以透過 變數 帶入
      ["data1", 30, 200, 100, 400],
      ["data2", 50, 20, 10, 40]
    ],
    // 顯示線圖上面每一點的資料
    // labels: true
    // 每一點的資料顯示 $
    labels: {
      format: {
        data1: d3.format("$")
      }
    }
  },
  //設定一組色票讓data自己捉 線 的顏色
  color: {
    pattern: ["#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2"]
  },
  // 設定顯示格線(虛線)
  grid: {
    x: {
      show: true
    },
    y: {
      show: true
    }
  },
  //整體尺寸 不設定的話，圖表可以自適應地伸縮
  size: {
    width: 780,
    height: 400
  },
  //padding 會壓縮線圖的大小
  padding: {
    top: 0,
    //right設太小，會讓最右側刻度的日期被遮住
    right: 100,
    bottom: 10,
    left: 100
  },
  //設定坐標軸格式
  axis: {
    x: {
      type: "timeseries",
      //刻度
      tick: {
        count: 4,
        format: "%Y-%m-%d",
        // outer 拿掉圖表最右側多出來的刻度
        outer: false
      },
      // 設定x軸說明 或是 數據 的單位
      label: {
        text: "日期",
        //label 橫式的位置有以下幾種
        //inner-right [default],inner-center,inner-left,outer-right,outer-center,outer-left
        position: "outer-center"
      }
    },
    y: {
      show: true,
      tick: {
        //label 的位置有以下幾種
        //inner-right [default],inner-center,inner-left,outer-right,outer-center,outer-left
        position: "inner-center",
        // Y軸 數字前面加上 $ 字號
        format: d3.format("$,")
        //format: function (d) { return "$" + d; }
      },
      label: {
        text: "價格",
        // inner-right : default, inner-center, inner-left, outer-right, outer-center, outer-left
        position: "outer-middle"
      }
    }
  },
  //設定圖例
  legend: {
    show: true,
    //圖例的位置只有 'right' 與 'bottom'
    position: "bottom"
  },
  //圖表的標題
  title: {
    text: "好心指數"
  }
});

CSS設定的部分：

// CSS
.c3-title {
  font-size: 32px;
}

.c3-axis-y text {
  fill: red;
  font-size: 12px;
}

.c3-axis-x text {
  font-size: 12px;
  fill: green;
}

.c3-axis-y text {
  font-size: 10px;
  fill: green;
  letter-spacing: 2px;
}

.c3-axis-y .c3-axis-y-label {
  font-size: 20px;
  fill: red;
}

.c3-line {
  stroke-width: 3px;
}

.c3-circle {
  fill: blue !important;
}

Line Chart 範例

Bar Chart 長條圖

Bar Chart 的設定大同小異，差別在於 axis 可以設定 rotated: false , 坐標軸翻轉，由垂直轉為水平。

var chart = c3.generate({
  bindto: ".chart",
  //是bind，不是bid
  data: {
    x: "x",
    columns: [
      [
        "x",
        "2013-01-01",
        "2013-01-02",
        "2013-01-03",
        "2013-01-04",
        "2013-01-05"
      ],
      ["data1", 30, 200, 100, 400, 150],
      ["data2", 130, 100, 140, 200, 150]
    ],
    //type 設定圖表類型
    type: "bar"
  },
  bar: {
    //設定長條圖每一條寬度
    width: {
      ratio: 0.5 // this makes bar width 50% of length between ticks
    }
    // or
    //width: 100 // this makes bar width 100px
  },

  //設定一組色票讓data自己捉
  color: {
    pattern: ["#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2"]
  },
  // 設定顯示格線(虛線)
  grid: {
    x: {
      show: true
    },
    y: {
      show: true
    }
  },
  //整體尺寸 不設定的話，圖表可以自適應地伸縮
  size: {
    width: 780,
    height: 400
  },
  padding: {
    top: 0,
    right: 200,
    bottom: 10,
    left: 100
  },
  axis: {
    //rotated 設定坐標軸翻轉
    rotated: false,
    x: {
      type: "category",
      // 設定x軸說明 或是 數據 的單位
      label: {
        text: "日期",
        //label 橫式的位置有以下幾種
        //inner-right [default],inner-center,inner-left,outer-right,outer-center,outer-left
        position: "outer-center"
      }
    },
    y: {
      tick: {
        position: "inner-center",
        // Y軸 數字前面加上 $ 字號
        format: d3.format("$,")
        //format: function (d) { return "$" + d; }
      },
      label: {
        text: "價格",
        // inner-right : default, inner-center, inner-left, outer-right, outer-center, outer-left
        position: "outer-middle"
      }
    }
  },
  legend: {
    show: true,
    //圖例的位置 'bottom'
    position: "bottom"
  },
  //圖表的標題
  title: {
    text: "銷售金額"
  }
});

Bar Chart 範例

Pie Chart 餅圖

var chart = c3.generate({
  bindto: ".chart",
  data: {
    // iris data from R
    columns: [
      ["iPhone", 30],
      ["其他手機", 120]
    ],
    type: "pie",
    labels: true    
  },
  //設定一組色票讓data自己捉 線 的顏色
  color: {
    pattern: ["#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2"]
  },
  //整體尺寸，本來置中，會往畫面左邊靠
  size: {
    width: 780,
    height: 400
  },
  //padding 會壓縮線圖的大小
  padding: {
    top: 0,    
    right: 100,
    bottom: 10,
    left: 100
  },
  //設定圖例
  legend: {
    show: true,
    //圖例的位置只有 'right' 與 'bottom'
    position: "bottom"
  },
 //pie 及 donut 圖 label 設定的方式和其他圖不一樣，要注意
  pie: {
    label: {
      show: true,
      format: function (value, ratio, id) {
        return d3.format("$")(value);
      }
    }
  },
  //圖表的標題
  title: {
    text: "銷售金額比例"
  }
});

Pie Chart 範例

Donut Chart 甜甜圈圖

var chart = c3.generate({
  bindto: ".chart",
  data: {
    // iris data from R
    columns: [
      ["iPhone", 30],
      ["其他手機", 120]
    ],
    type: "donut",
    labels: true
  },
  //設定一組色票讓data自己捉 線 的顏色
  color: {
    pattern: ["#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2"]
  },
  //整體尺寸，本來置中，會往畫面左邊靠
  size: {
    width: 780,
    height: 400
  },
  //padding 會壓縮線圖的大小
  padding: {
    top: 0,
    //right設太小，會讓最右側刻度的日期被遮住
    right: 100,
    bottom: 10,
    left: 100
  },
  //設定圖例
  legend: {
    show: true,
    //圖例的位置只有 'right' 與 'bottom'
    position: "bottom"
  },
  //pie 及 donut 圖 label 設定的方式和其他圖不一樣，要注意
  donut: {
    title: "地區",
    //控制環的粗細
    width:80,
    label: {
      show: true
    }
  },
  //圖表的外部標題
  title: {
    text: "銷售金額比例"
  }
});

Donut Chart 範例

先整理以上這些基本設定，以後若有新發現在隨時更新！如果有錯誤的地方，也請不吝告訴我。感謝！

參考資料

JavaScript
#JavaScript, JS直播班, C3.js
C3.js基本使用方法
https://popeye-ux.github.io/2021/11/29/c3js/
作者
POPEYE
發布於
2021年11月29日
許可協議