JS 筆記 - C3.js 基本認識

C3.js 原自 D3.js 開源的圖表套件，相較於好上手，沒有太多繁瑣複雜的設定，設定方式跟 Chart.js 有一點點像，如果有用過 Chart.js 要上手是不困難的。

起手式

載入 CSS

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

載入 JavaScript

1 2	<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 名稱可以自訂義。

1	<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/hnzxewqw/pen/OJMorLa

改變圖表類型

加上一個 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", //名稱位置
      },
    },
  },
});

DEMO https://codepen.io/hnzxewqw/pen/WNrgYBW

串接 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

1
2
3

chart.unload({
  ids: ["data2", "data3"],
});

串接 API 與圖表結合

使用這筆 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.onload = 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/hnzxewqw/pen/KKVxGXy

提姆寫程式