# 第七週課程重點筆記
###### tags: `JS 課程重點筆記` `2021` `JS直播班` `秋季班` `六角學院`

## :dart: C3.js 套件
### [環境設定 codepen](https://codepen.io/hexschool/pen/poRzRXW?editors=1010)
- 外部 CDN 共 3 支 (JS *2, CSS *1)
- D3 要在 v5 版本

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

- 先載入套件，後面再用 all.js 或 all.css
- all.js 放在 html body 的最後 (等畫面都畫出來再綁DOM)

## :dart: 觀察套件

### :one: 套件內都有固定要求的格式，須依照格式輸入資料

let chart = c3.generate({
    bindto: '.chart', // HTML 元素綁定
    data: {
      columns: [
        ['data1', 100, 200, 300, 400, 100, 200],
        ['data2', 400, 300, 200, 100, 200, 300]
      ], // 資料存放
    }
});

// 回推 c3 套件的格式
// function 內的參數為物件
let c3 = {
    generate: function(obj){
        //generate 函式的內容         
    }   
}

### :two: 折線圖增加時間軸 **(x軸)**

let chart = c3.generate({
    // 1
    bindto: '#chart', // HTML 元素綁定
    
    //2     
    data: {
      x: 'x', // x 軸綁到陣列第一個有 'x' 字串
      columns: [
        ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ] // 資料存放
    },
    
    // 3
    axis: { // 座標軸，有 x 與 y 軸
          x: {
              type: 'timeseries',
              tick: {
                  format: '%Y-%m-%d'
              }
          }
      }
});

### :three: 各種類型圖表及圖表設定
#### [C3.js CHART](https://c3js.org/examples.html#chart): 圖表類型
#### [C3.js DATA](https://c3js.org/examples.html#data): 各種跟資料相關的表格設定(包括顏色...)

## 以物件內的「屬性」重組新陣列：Object.keys(obj)

let car = {
    brand: 'Mercedez-Benz',
    year: 2021,
    owner: 'Karen Huang',
    color: 'dark green',
}

console.log(Object.keys(car))
//['brand', 'year', 'owner', 'color']

## 以物件內「屬性的值」重組新陣列：[Object.values(obj)](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/values)

let car = {
    brand: 'Mercedez-Benz',
    year: 2021,
    owner: 'Karen Huang',
    color: 'dark green',
}

console.log(Object.values(car))
//['Mercedez-Benz', 2021, 'Karen Huang', 'dark green']