Je code donc je suis là.

0%

以 Axios 讀取 API 並將資料 以 D3js 顯示出圖表

Posted on Edited on In

參加六角舉辦的「JS 學徒特訓班」記錄筆記

第三十關，第三十關 C3.js 圖表整合

內容：以 Axios 讀取 API、使用 D3js 顯示視覺畫圖表。
方式：

引進所需的函式庫

讀取 API 的 Axios
資料視覺畫的 D3js, C3js 以及 C3 所需的 CSS

1
2
3
4
5
6
7
<!-- 載入 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.css">

<!-- 載入 JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<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>

接著是 html 的內容

1
2
3
4
<section>
  <h2>JavaScript 特訓班關卡進度</h2>
  <div id="chart"></div>
</section>

定義所需變數

1
2
3
4
5
6
7
let data = []; //存放回傳資料用
// 宣告 columns 變數要放入完成率的資料。
let columns = ['完成率']; //data 對應名稱與存放數據資料用
// 宣告 category 變數要放入參賽者姓名資料。
let category = [];
let url =
  'https://raw.githubusercontent.com/hexschool/hexschoolNewbieJS/master/data.json';

讀取 API 資料

使用 Axios 取出 API 的資料，並且以then() 和catch()觀察取出資料狀態。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 取資料
axios
  .get(url)
  .then((response) => {
    data = response.data;
    // console.log(data);
    // renderRecord();
    sortData();
    renderLoad(columns, category);
  })
  .catch((err) => {
    console.log(err);
  });

資料處理

排序、將符合條件的資料取出並存入指定陣列中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 資料排序函式
function sortData() {
  // 先排序
  data.sort((a, b) => parseFloat(b.process) - parseFloat(a.process));
  // 將資料撈出並推進陣列
  data.forEach((item) => {
    if (item.process !== '0%') {
      // 只顯示有進度的
      columns.push(parseInt(item.process));
      category.push(item.name);
    }
  });
  // console.log(columns, category);
}

資料圖形化並渲染畫面

使用 C3js 來渲染畫面，並細部設定資料呈現的方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// 資料圖形化＋渲染函式
function renderLoad(columns, category) {
  let chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [[...columns]], //
      axes: {
        // 軸數
        完成率: 'y2',
      },
      //自訂圖表類型
      type: 'bar',
      colors: { 完成率: '#9ccc65' },
    },
    // 控制圖表尺寸
    size: {
      height: category.length * 30, //調整圖表高度
    },
    // 控制軸線顯示
    axis: {
      // 軸
      rotated: true, // 轉橫向
      // X 軸
      x: {
        type: 'category', // 左側 X 軸顯示
        categories: category, //參賽姓名資料
        label: { text: 'X軸 參賽者姓名', position: 'outer-center' },
      },
      //  Y 軸
      y: {
        show: true, //下方 Y 軸顯示
        label: { text: 'Y軸 完成率', position: 'outer-middle' },
      },
      y2: {
        show: true, //上方 Y 軸顯示
        label: {
          text: 'Y2軸 完成率完成率',
          position: 'outer-middle', //名稱位置
        },
      },
    },
  });
}

C3js 的使用方式

進行前先說明一下使用 C3js 的方式：
除了先引進必須的樣式表和函式庫外，C3js 需要先透過 C3 的generate()的函式來產生圖表，並透過此函式內的物件參數，來控制圖表。
C3.js | D3-based reusable chart library

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
let chart = c3.generate({
  bindto: '#chart', // 綁定 DOM
  //控制、處理與資料、數據相關部分
  data: {
    columns: [
      // 資料來源
      ['資料1', 10, 20, 30, 40, 50],
      ['資料2', 10, 20, 30, 40, 50],
    ],
    axes: {
      // 軸數

      完成率: 'y2',
    },
    //自訂圖表類型
    type: 'bar',
    //圖表顏色
    colors: { 完成率: '#9ccc65' },
  },
  // 控制尺寸
  size: {},
  // 控制圖表的 X,Y軸說明
  axis: {
    // 軸
    rotated: true, // 轉橫向
    // X 軸
    x: {
      type: 'category', // 左側 X 軸顯示
      categories: category, //參賽姓名資料
      label: { text: '參賽者姓名', position: 'outer-center' },
    },
    //  Y 軸
    y: {
      show: true, //下方 Y 軸顯示
      label: { text: '完成率', position: 'outer-middle' },
    },
    y2: {
      show: true, //上方 Y 軸顯示
      label: {
        text: '完成率',
        position: 'outer-middle', //名稱位置
      },
    },
  },
});

在這份作業裡，我們可以把整份 C3js 的控制成一個函式，藉由帶參數的方式，將可重複使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
function renderLoad(columns, category) {
  let chart = c3.generate({
    bindto: '#chart', // 綁定顯示位置 DOM
    data: {
      // 圖表的資料來源
      columns: [[...columns]], // 要顯示的資料數據
      axes: {
        // 軸數
        完成率: 'y2',
      },
      //自訂義圖表類型
      type: 'bar',
      colors: { 完成率: '#9ccc65' },
    },
    // 控制圖表尺寸
    size: {
      height: category.length * 30, //調整圖表高度
    },
    // 控制軸線顯示
    axis: {
      // 軸
      rotated: true, // 轉橫向
      // X 軸
      x: {
        type: 'category', // 左側 X 軸顯示
        categories: category, //參賽姓名資料
        label: { text: '參賽者姓名', position: 'outer-center' },
      },
      //  Y 軸
      y: {
        show: true, //下方 Y 軸顯示
        label: { text: '完成率', position: 'outer-middle' },
      },
      y2: {
        show: true, //上方 Y 軸顯示
        label: {
          text: '完成率',
          position: 'outer-middle', //名稱位置
        },
      },
    },
  });
}