[JS學徒特訓班]C3.js 基本認識與圖表整合

Mio

Published in

斜槓女紙

Jul 29, 2020

老師說：我每天都花2小時練習了，你還不練習嗎？

這次入坑了六角學院舉辦的JS學徒特訓班，想藉著60關的訓練再把自己的基礎觀念打穩一些。

默默來到第30關，這次的目標是練習C3.js圖表搭配AJAX整合，紀錄一下我在這關的思路以及怎麼解題的經過。

C3.js基本認識

說起來以前曾經使用過一小會兒的Chart.js，不過那時的我還沒有踏入JS的領域，只是單純為了網頁設計需要而放了官方範例而已。

C3.js 原自 D3.js 開源的圖表套件，設定方式和Chart.js挺相似的。

起手式

載入 CSS

<link href=”https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.css">

2. 載入 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，才會有效果。

3. 在HTML文件中放入下列標籤，id名稱可自由命名

<div id="chart"></div>

取得資料與整理資料格式

引入axios後，先根據題目所給的api網址撈取資料。

var url ="https://raw.githubusercontent.com/hexschool/hexschoolNewbieJS/master/data.json";
var data = [];//取得資料
axios.get(url).then((res) => {
  data = res.data;
}).catch((error) => {
  console.log('資料錯誤', error);
});

2. 分析資料格式：考慮到畫面呈現的美觀度，這次決定採用長條圖的形式來呈現撈回來的資料。

但因為C3.js 要求的資料格式如下，必須稍微把取得的資料整理一下

var chart = c3.generate({
    bindto: '#chart',  //要出現圖表的HTML標籤名稱
    data: {            //圖表呈現的資料內容
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['標題', 資料]
      ]
    }
});

3. 整理資料格式

首先定義兩個空陣列準備存放預計取用的資料，稍微把程式碼整理一下，同時處理非同步的問題。

var nameList =[];   //參賽者姓名
var completion = ["完成率"];   //參賽者完成率，第一個資料一定要是標題

排除完成率為 0的參賽者，避免無用資料過多。

data.forEach(function(item) {
  var isProcess = parseInt(item.process);
  if ( isProcess !== 0 ) {
      completion.push(isProcess)
      nameList.push(item.name)
  };
});

使用sort將資料排序

data.sort(function(a,b){
  return parseInt(b.process) - parseInt(a.process);
});

設定圖表內容

使用 generate() 產生圖表，在 colums 中放入將完成度的資料，可以得到下面的基礎圖表。

var chart = c3.generate({
  data:{
    columns:[completion],
    type: ‘bar’
  },
});

2. 根據 C3.js官方文件調整圖表的呈現樣式，使用 axis 參數設定 x、y軸，各種參數細節設定可以參考官方文件。

axis: {
  rotated: true,  //旋轉圖表
    x: {
    show: true,               // 顯示 X 軸
      type: "category",         // X 軸資料類型
      categories: nameList,     // X 軸需顯示的資料
      tick: {
        multiline: false      // 顯示換行設定
      }
  },
  y: {
    show: true,               // 顯示 Y 軸 
    max: 100                  // Y 軸資料最大值
  },
}

3. 調整圖表細節部分，先在 x軸加入欄位

label: {
  text: "參賽者姓名",
  position: "outer-center"
}

4. 調整圖表高度與寬度，讓圖表看起來順眼些

size: {
   height: completion.length * 45, //調整圖表高度
   width: 1024
}

5. 最後換個順眼的顏色，打完收工

colors: {
   完成率: "#ffb300"
}

參考資料

特別感謝 Tim 和 Erica 詳細的文章，讓我能快速地上手C3.js的使用方法以及對於解題的思路引導，真的幫了好多忙~

你有更多的問題嗎？你有什麼建議呢？
歡迎在下方留言，或加入我的臉書粉絲頁一起討論！

【免費支持】如果你幫我拍手5下，我有機會得到內容創作的酬勞🙂

[JS學徒特訓班]C3.js 基本認識與圖表整合

C3.js基本認識

起手式

取得資料與整理資料格式

設定圖表內容

參考資料

Written by Mio