C3.js 簡易快速入門

簡介

C3.js是基於d3.js的JavaScript圖表函式庫，相對於dimple.js或NVD3，使用上更為簡單。這幾個都是開放源碼的專案。

C3的使用相當容易，主要用c3.generate()綁定好圖表的所在位置，設置其中的參數物件，就可做出許多變化。其參數物件就像JSON般的結構（如同Python的字典），要使用什麼參數，查一下說明，填進去即可。也可以直接找範例來做修改。 大多數常見的圖表類型，可用C3.js就很容易做出來，若需要複雜的功能，再用d3.js來定製。

設置

<link href="/path/to/c3.css" rel="stylesheet" type="text/css">
<script src="/path/to/d3.v3.min.js" charset="utf-8"></script>
<script src="/path/to/c3.min.js"></script>

產生圖表

<div id="chart"></div>
var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});

參數物件有許多種，大多數參數物件都有預設值，若沒指定就會用預設值，如上例沒指定圖表種類，就產生預設的line chart。故使用時只需指定必要的參數物件即可。

一個簡單實例的作法

通常把前述設置的JavaScript掛載在頁面最後。
在載入頁面後，收集頁面上表格的資料列，放到陣列中，再指定給c3.generate()的data參數。
以jQuery來說，在頁面載入的事件為：$(document).ready()

把表格中的某欄資料，讀入陣列中：

var trs = document.getElementsByTagName('tr');
var dataMor = new Array(trs.length - 2);
dataMor[0] = '資料標題';
for (var i = 2; i < trs.length - 1; i++){
    var tds = trs[i].getElementsByTagName('td');
    dataMor[i - 1] = parseInt(tds[2].textContent);
}

指定給data參數：

data: {
    columns: [
        dataMor
    ]
}

2017-6-16：補充本例所產生的一張圖表，內容是某家上櫃公司的每月營收狀況，原始資料來自公開資訊觀測站。

同樣基於d3.js的圖表函式庫其實還有不少種，多到足夠讓人眼花瞭亂，C3.js不見得是最好的，重點是要看是否合用。

本文早在 2015-12-12寫好，一直放在電腦中，差點忘了它的存在，年底大清倉發現，調整一下放出來。

敬祝2017年新年快樂！

參考

以下都是C3.js網站上的網頁

• Getting Started
• Examples
• Reference