Je code donc je suis là.

0%

JS Axios API、D3js 顯示圖表

第三十關,第三十關 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', //名稱位置
},
},
},
});
}