分享

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

老師說:我每天都花2小時練習了,你還不練習嗎?
這次入坑了六角學院舉辦的JS學徒特訓班,想藉著60關的訓練再把自己的基礎觀念打穩一些。
默默來到第30關,這次的目標是練習C3.js圖表搭配AJAX整合,紀錄一下我在這關的思路以及怎麼解題的經過。

C3.js基本認識

說起來以前曾經使用過一小會兒的Chart.js,不過那時的我還沒有踏入JS的領域,只是單純為了網頁設計需要而放了官方範例而已。
C3.js 原自 D3.js 開源的圖表套件,設定方式和Chart.js挺相似的。

起手式

  1. 載入 CSS
2. 載入 JavaScript
亦可從官方 GitHub 中下載最新版本的 C3.js
因為基於 D3.js 所開發的套件,所以還是要載入 D3.js,才會有效果。
3. 在HTML文件中放入下列標籤,id名稱可自由命名

取得資料與整理資料格式

  1. 引入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);
});

設定圖表內容

  1. 使用 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"
}

參考資料

特別感謝 TimErica 詳細的文章,讓我能快速地上手C3.js的使用方法以及對於解題的思路引導,真的幫了好多忙~
如果喜歡這次文章的話請幫忙拍手給我個鼓勵喔!
分類:學習

是個融合了技術魂和少女心的女紙,喜歡寫寫code、用相機記錄日常生活,喜歡♥美食、♥旅遊、♥美妝保養、♥自己動手做甜點,還有體驗各種奇奇怪怪的新鮮事物。在這裡與大家一起分享我的簡單生活,體驗日常的小確幸。 ➤廠商邀稿、合作請洽:lymio51[email protected]

評論
上一篇
  • [JS學徒特訓班] JavaScript ES6 樣板字串(Template String)
  • 下一篇
  • [不專業Photoshop教學]讓人頭痛的髮絲去背
  • 更多文章
    載入中... 沒有更多了