# C3.js圖表套件
### 利用CDN載入套件
由於C3.js為基於D3.js開發的圖表套件，在載入C3前，務必先載入D3
* 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>

* CSS

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

### 生成圖表
C3透過呼叫`generate()`函式來生成圖表，並將包含該圖表的元素插入到在該參數中指定為選取器的元素中作為`bindto`
1. 在HTML中新增元素，id名稱可自訂

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

2. C3透過呼叫`generate()`函式來生成圖表，`generate()`函式中帶入的參數為一個物件

官網的長條圖範例：

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

* 利用`bindto`綁定要生成的圖表，範例的值為HTML元素的id名稱
* 在`data`的`columns`放入陣列資料
* 資料的格式為陣列中第一筆元素放資料標題，後續才放入數據

### 自訂義圖表
依據C3規範，自行變更各屬性的值來修改圖表

#### 增加新軸

let 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
      }
    }
});

* 在`data`物件中新增`axes`屬性，值為`y2`
* 在`axis`屬性中將`y2`設定為顯示`show`

#### 改變圖表類型

let chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ],
      axes: {
        data2: 'y2'
      },
      types: {
        data2: 'bar' // ADD
      }
    },
    axis: {
      y: {
        label: {
          text: 'Y Label',
          position: 'outer-middle'
        }
      },
      y2: {
        show: true,
        label: {
          text: 'Y2 Label',
          position: 'outer-middle'
        }
      }
    }
});

* 在`data`中新增`types`屬性，C3.js提供的圖表類型可參考[官方文件](https://c3js.org/examples.html)

#### 串接API
1. 載入數據

// let chart = c3.generate({ ... });

chart.load({
  columns: [
    ['data1', 300, 100, 250, 150, 300, 150, 500],
    ['data2', 100, 200, 150, 50, 100, 250]
  ]
});

2. 卸載數據

// var chart = c3.generate({ ... });

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

3. 顯示／隱藏數據

// let chart = c3.generate({ ... });

chart.hide(['data2', 'data3']);
chart.show(['data2', 'data3']);

#### 自訂義樣式

#chart .c3-line-data2 {
  stroke-width: 5px;
}

* 利用折線圖的`c3-line-[id]`class自訂css樣式

### 參考文章
* [C3.js官方網站](https://c3js.org)
* [JS 筆記 - C3.js 基本認識](https://hsuchihting.github.io/javascript/20200715/3292510004/)