C3.js D3.js JavaScript

好用的輕量統計圖表 C3.js

許智庭 Tim Hsu 2021/10/27 09:36:20
196

C3.js 原自 D3.js 開源的圖表套件,相較於好上手,

沒有太多繁瑣複雜的設定,設定方式跟 Chart.js 有一點點像,如果有用過 Chart.js 要上手是不困難的。

 

起手式

載入 CSS

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.css">

載入 JavaScript

<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 中下載最新版本的 C3.js。

因為基於 D3.js 所開發的套件,所以還是要載入 D3.js,才會有效果。

 

在 HTML 中放入這個標籤,id 名稱可以自訂義。

<div id="chart"></div>

 

使用長條圖

這邊使用長條圖當做範本,在 JS 中貼上下方程式碼,

* c3 使用 generate() 這個方法啟動圖表內容,其內容皆為物件。

* 將 id 名稱用引號放在 bindto 這個位置。

* data 為資料位置,columns 中放入陣列資料。

* 相關設定則在 data 外。

var chart = c3.generate({

    bindto: '#chart',

    data: {

      columns: [

        ['data1', 30, 200, 100, 400, 150, 250],

        ['data2', 50, 20, 10, 40, 15, 25]

      ]

    }

});

就會得到基本的 DEMO 圖表。

 

自訂義圖表

右側加上數據

* 在 data 物件外加上 axes 屬性,給予 data2 數據軸線。

* 用 axis 屬性指定剛剛 y2 數據軸線給予顯示。

var chart = c3.generate({

  bindto: '#chart',

  data: {

    columns: [

      ['data1', 30, 200, 100, 400, 150, 250],

      ['data2', 50, 20, 10, 40, 15, 25]

    ],

    axes: {

      data2: 'y2' // ADD

    }

  },

  axis: {

    y2: {

      show: true // ADD

    }

  }

});

DEMO https://codepen.io/tim_hsu/pen/NWxLXRK

 

改變圖表類型

加上一個 type 屬性,給予指定的數據使用圖表類型,這裡使用 bar (長條圖)。更多圖表類型請見官網,看不懂英文沒關係,可以用 google 翻譯,懶得用的話就直接每個點出來玩一玩吧!

改變圖表顏色使用 color 屬性,更改的圖表數據用物件包覆起來。

只要是針對資料相關設定都要寫在 data 的物件內。

 

var chart = c3.generate({

  bindto: '#chart',

  data: {

    columns: [

      ['data1', 30, 200, 100, 400, 150, 250],

      ['data2', 50, 20, 10, 40, 15, 25]

    ],

    //新增 data2 的數據在右邊

    axes: {

      data2: 'y2'

    },

    //自訂圖表類型

    types: {

      data1: 'line', //指定 data1 的圖表類型

      data2: 'bar' // 指定 data2 的圖表類型

    },

    //自訂 data 顏色

    colors: {

      "data1": '#03A9F4',

      "data2": '#76FF03'

    },

  },

  legend: {

    show: true //是否顯示項目

  },

  //客製左邊數據

  axis: {

    //客製 X 軸內容

    x: {

      type: 'category',

      categories: [2000, 2001, 2002, 2003, 2004, 2005],

      label: {

        text: 'X軸名稱'

      }

    },

    //客製 Y 軸內容

    y: {

      label: {

        text: '左邊Y軸名稱',

        position: 'outer-middle' //名稱位置

      }

    },

    //客製右側 (data2) Y2 軸內容

    y2: {

      show: true,

      label: {

        text: '右邊Y軸名稱',

        position: 'outer-middle' //名稱位置

      }

    }

  }

});

 

串接 API 資料

如果要串接 API,可以使用下方程式碼,

require.config({

  baseUrl: '/js',

  paths: {

    d3: "http://d3js.org/d3.v5.min"

  }

});



require(["d3", "c3"], function(d3, c3) {

  c3.generate({

    ...

  });

});

 

Load Data

使用 load() 方法來載入

chart.load({

  columns: [

    ['data1', 300, 100, 250, 150, 300, 150, 500],

    ['data2', 100, 200, 150, 50, 100, 250]

  ]

});

 

unload Data

使用 unload() 卸載 data

chart.unload({

    ids: ['data2', 'data3']

});

 

DEMO

 

使用這筆 API 來做這次範本的串接,並使用 promise 語法。

const url = 'https://gonsakon.github.io/D3-API-SAMPLE/';

console.log(url);



//載入圖表

function load(data) {

  var chart = c3.generate({

    bindto: '#chart',

    data: {

      columns: data,

    }

  });

}



//取得資料方法

function getURL(URL) {

  return new Promise(function (resolve) {

    var xhr = new XMLHttpRequest();

    xhr.open('get', url + URL);

    xhr.send(null)

    xhr. function () {

      //回傳一個資料

      resolve(JSON.parse(xhr.responseText));

    }

  });

}



//取得高雄屏東資料

let kaohsiung = getURL('kaohsiung.json');

let pingtung = getURL('pingtung.json');



//promise AJAX 取得資料方式

Promise.all([kaohsiung, pingtung]).then(function (results) {

  var originData = [];

  originData.push(['高雄'].concat(results[0]));//把高雄資料展開後載入圖表

  originData.push(['屏東'].concat(results[1]));//把屏東資料展開後載入圖表

  load(originData); //帶回圖表

});

DEMO https://codepen.io/tim_hsu/pen/KKVxQWy

 

參考資料

* C3.js

* D3.js、C3.js 資料視覺化教學

* JavaScript ES6 Promise

許智庭 Tim Hsu