好用的輕量統計圖表 C3.js
C3.js 原自 D3.js 開源的圖表套件，相較於好上手，
沒有太多繁瑣複雜的設定，設定方式跟 Chart.js 有一點點像，如果有用過 Chart.js 要上手是不困難的。
起手式
載入 CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.css">載入 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>亦可從官方 GitHub 中下載最新版本的 C3.js。
因為基於 D3.js 所開發的套件，所以還是要載入 D3.js，才會有效果。
在 HTML 中放入這個標籤，id 名稱可以自訂義。
<div id="chart"></div>
使用長條圖
這邊使用長條圖當做範本，在 JS 中貼上下方程式碼，
* c3 使用 generate() 這個方法啟動圖表內容，其內容皆為物件。
* 將 id 名稱用引號放在 bindto 這個位置。
* data 為資料位置，columns 中放入陣列資料。
* 相關設定則在 data 外。
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});就會得到基本的 DEMO 圖表。
自訂義圖表
右側加上數據
* 在 data 物件外加上 axes 屬性，給予 data2 數據軸線。
* 用 axis 屬性指定剛剛 y2 數據軸線給予顯示。
var 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
}
}
});DEMO https://codepen.io/tim_hsu/pen/NWxLXRK
改變圖表類型
加上一個 type 屬性，給予指定的數據使用圖表類型，這裡使用 bar (長條圖)。更多圖表類型請見官網，看不懂英文沒關係，可以用 google 翻譯，懶得用的話就直接每個點出來玩一玩吧！
改變圖表顏色使用 color 屬性，更改的圖表數據用物件包覆起來。
只要是針對資料相關設定都要寫在 data 的物件內。
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
//新增 data2 的數據在右邊
axes: {
data2: 'y2'
},
//自訂圖表類型
types: {
data1: 'line', //指定 data1 的圖表類型
data2: 'bar' // 指定 data2 的圖表類型
},
//自訂 data 顏色
colors: {
"data1": '#03A9F4',
"data2": '#76FF03'
},
},
legend: {
show: true //是否顯示項目
},
//客製左邊數據
axis: {
//客製 X 軸內容
x: {
type: 'category',
categories: [2000, 2001, 2002, 2003, 2004, 2005],
label: {
text: 'X軸名稱'
}
},
//客製 Y 軸內容
y: {
label: {
text: '左邊Y軸名稱',
position: 'outer-middle' //名稱位置
}
},
//客製右側 (data2) Y2 軸內容
y2: {
show: true,
label: {
text: '右邊Y軸名稱',
position: 'outer-middle' //名稱位置
}
}
}
});串接 API 資料
如果要串接 API，可以使用下方程式碼，
require.config({
baseUrl: '/js',
paths: {
d3: "http://d3js.org/d3.v5.min"
}
});
require(["d3", "c3"], function(d3, c3) {
c3.generate({
...
});
});
Load Data
使用 load() 方法來載入
chart.load({
columns: [
['data1', 300, 100, 250, 150, 300, 150, 500],
['data2', 100, 200, 150, 50, 100, 250]
]
});unload Data
使用 unload() 卸載 data
chart.unload({
ids: ['data2', 'data3']
});
DEMO
使用這筆 API 來做這次範本的串接，並使用 promise 語法。
const url = 'https://gonsakon.github.io/D3-API-SAMPLE/';
console.log(url);
//載入圖表
function load(data) {
var chart = c3.generate({
bindto: '#chart',
data: {
columns: data,
}
});
}
//取得資料方法
function getURL(URL) {
return new Promise(function (resolve) {
var xhr = new XMLHttpRequest();
xhr.open('get', url + URL);
xhr.send(null)
xhr. function () {
//回傳一個資料
resolve(JSON.parse(xhr.responseText));
}
});
}
//取得高雄屏東資料
let kaohsiung = getURL('kaohsiung.json');
let pingtung = getURL('pingtung.json');
//promise AJAX 取得資料方式
Promise.all([kaohsiung, pingtung]).then(function (results) {
var originData = [];
originData.push(['高雄'].concat(results[0]));//把高雄資料展開後載入圖表
originData.push(['屏東'].concat(results[1]));//把屏東資料展開後載入圖表
load(originData); //帶回圖表
});DEMO https://codepen.io/tim_hsu/pen/KKVxQWy
參考資料
* C3.js
