第一次使用 C3.js 是還在練習純 Javascript 的時候，還記得之前剛套用成功時，看到圖表那刻整個很興奮、超有成就感、又感覺超厲害 ( 套件真好用！)，現在在準備作品集，是用 React 框架去寫，所以就再把這個圖表套件拿來用，有圖表的效果加持果然很不錯，在套用時一樣又要找一下文件，所以這次就順便把步驟寫下來，以後如果有需要，應該就會快不少
這次要筆記的是：
C3.js 圖表套件
官方網址請 點這，建議搭配官方給的文件一起看會比較清楚
快速尋找
1. 安裝 C3.js
有二種方法，二擇一
→ 用 npm 安裝
打開終端機，輸入指定 npm install c3 ，然後在要顯示圖表的組件上，引入 C3 即可
npm 是 Node.js 的套件管理工具，安裝 Node.js 就會自帶 npm ，所以如果沒有安裝 npm，則要先去 Node.js 的官網 先下載「 Node.js ( LTS 版 ) 」 然後在專案資料夾中打開終端機，輸入指定 npm init -y ，會產生一個 package.json 文件，這樣就 OK 了！
→ 用 cdn 載入
將第一行 <link> 放在 html 的 <head> 內、將第二行和第三行的 <script> 放在 html 的 <body> 內
任何的 cdn 都可以在 cdnjs 內快速找到
2. 定義圖表的容器名稱
在組件 return 內，給予要放置圖表容器一個 id 名稱，可以自定義
3. 選擇圖表類型
在 C3.js 的 官網 的「Examples」內，選擇自己要的圖表類型，並複製程式碼
PS: 用「Donut Chart」這個圖表類型來做示範
4. 將圖表程式碼貼到組件 ( 含必要屬性說明 )
將上方複製的程式碼貼到組件上，可以選擇全部貼上，或是貼上必要的就好 ( 這邊我只貼上必要的 )
- generate()：用來產生圖表
- bindto：要綁定的標籤元素的 id 名稱
- data.columns：圖表的資料，資料型別為「陣列」，而每個陣列裡的第一個是放數據名稱、第二個後才是放數值
- data.type：圖表的類型，如：甜甜圈圖表為 donut、圓餅圖為 pie、長條圖為 bar…等，都可以在剛剛 C3.js 的官網的「Examples」找到
- donut.title：甜甜圈圖表的名稱
只要上方的步驟都沒問題的話，到這步就可以看到圖表了
5. 改變圖表的數據顏色
如果有想改變圖表的顏色，有兩種寫法：
→ 數據需要指定顏色
在 data.colors 內，寫入每個數據名稱所對應的顏色，資料型別是物件，key 是數據名稱、value 是色碼
key 名稱要跟 data.columns 內的數據名稱一樣，才有辦法指定顏色
→ 數據不需要指定顏色
在 color 內，寫入所有的顏色，資料型別是物件，key 直接寫「pattern」，value 是陣列，裡面寫所有會用到的顏色
這裡有個小細節，小心寫錯！
→ 數據要指定顏色的話，寫在 data.colors ( color 有 s )
→ 數據不要指定顏色的話，寫在 color ( color 沒有 s )
6. 用 useEffect 初始化圖表
最後，將產生圖表的整個過程寫在 React 的 useEffect 內，這樣只要重新載入組件 ( 空陣列 [] ) 或是數據變更( [data] )時，就會更新圖表
記得在上方引入 useEffect
附上程式碼與成品：
import React, { useEffect } from 'react'
import * as c3 from 'c3';
import 'c3/c3.css';
export default function Chart() {
useEffect(()=>{
var chart = c3.generate({
bindto: "#chart",
data: {
columns: [
['data1', 30],
['data2', 120],
['data3', 60]
],
type: 'donut',
colors: {
data1: '#7DCDF2',
data2: '#5F5FE3',
data3: '#DF7ACA'
}
},
donut: {
title: "圖表的標題"
},
})
},[])
// 依賴可以為 空陣列[] (表示每次載入會更新圖表)
// 或是 [data] (表示當 data 改變時會更新圖表)
return (
<div id="chart"></div>
)
}