JavaScript C3.js

陣列排序 Sort()與 C3.js 視覺資料處理

許智庭 Tim Hsu 2022/01/07 14:32:09
508

本文使用資源

axios

API 連結

本文重點

使用 axios 串接 API,並且使用 forEach 來選取所要的資料,並且這次透過 change 事件的判斷條件,使資料有排序功能。

陣列排序進度

axios 取得 API 資料

 

  • 綁定 HTML 的標籤,變數也使用一樣的名稱。
  • 宣告一個變數為 data,後續存放回傳的資料用。
  • 使用 axios 取得 API 資料。
let record = document.querySelector(".record");
let data;

axios.get(dataUrl).then((response) => {
  data = response.data;
  console.log(data);
  getRecord();
});

 

建立清單渲染於網頁

使用一個函式存放要取得資料的方式,

  • 宣告一個變數為空字串。
  • 透過 forEach 來取得想要的資料。
  • 組字串,因為我要做成列表,所以用一個 div 包住,成為區塊元素。
  • 用 innerHTML 印出標籤在網頁上。
function getRecord() {
  let str = "";
  data.forEach((item) => {
    str += `
    <div>  
      <ul>
      <li>${item.name}</li>
      <li>${item.process}</li>
      </ul>
    </div>
  `;
  });
  record.innerHTML = str;
}

 

目前進度可看連結

 

監聽切換排序功能

延續上方取得資料後,要使用一個下拉選單做為條件,並排序其資料內容。

select

 

把選項先寫好在 option 中,並在 select 做一個 class。

 

<select class="select">
  <option value="id">依照 id 編號排序(由1開始從上往下)</option>
  <option value="process">依照完課率排序(由最高到最低)</option>
</select>

 

sort() 排序資料

使用 sort() 讓資料可以依照條件排序:

  • 建立一個函式,其參數為(資料,select 選擇結果)。
  • 判斷 select 的結果是 id ,使資料採用 sort()方法做排序(小到大),因為取得的值為字串,所以同時轉型為整數。
  • 判斷 select 的結果是 process,使資料採用 sort()方法做排序(大到小),並只取到小數點後兩位,因後台結果有超過小數點兩位,小數點取到後兩位的渲染畫面較好看也可以做區別。
//select 排列條件
function sortData(data, select) {
  if (select === "id") data.sort((x, y) => parseInt(x.id) - parseInt(y.id));
  //四捨五入,取小數點後兩位
  else if (select === "process")
    data.sort((x, y) => parseFloat(y.process) - parseFloat(x.process));
}

 

監聽事件

完成資料處理後,建立 select 的監聽事件,對應的是 change,其函式內容要按照原本條件的順序排列,不然讀取的結果會是相反。(因為程式是由上到下讀取)

 

//順序要擺對,不然內容會錯
function selectRecord() {
  sortData(data, select.value);
  getRecord();
}
select.addEventListener("change", selectRecord);

點連結看目前進度

 

串接 C3 圖表

起手式

基本認識可以看好用的輕量統計圖表 C3.js

取得資料

延續前面所使用的 sort() 與 axios 方法,結合 C3.js 圖表套件完成視覺化資料處理。

  • 宣告 columns 變數要放入完成率的資料。
  • 宣告 category 變數要放入參賽者姓名資料。
  • 其中要執行兩個函式。
let data; //存放回傳資料用
let columns = ["完成率"]; //data 對應名稱與存放數據資料用
let category = []; //參賽者姓名資料

axios.get(dataUrl).then((response) => {
  data = response.data;
  sortData(data);
  load(columns, category);
});

 

來看一下函式內容。

資料排序

改寫之前的篩選排序方法,

  • 資料排序從完成率高到低。
  • 取得完成率資料,取得小數點後兩位,並用百分比顯示,增加到圖表中的 columns
  • 將參賽者姓名資料,增加到 category 的空陣列中。
function sortData(data) {
  data.sort((x, y) => parseFloat(y.process) - parseFloat(x.process)); //完成率資料排序,高到低
  data.forEach((item) => {
    columns.push(parseFloat(item.process) / 100); //完成率資料取得小數點後兩位後,變百分比呈現
    category.push(item.name); //把參賽者資料推到參數中
  });
}

 

呈現在視覺資料中

  • 函式要帶入的參數就是完成率與參賽者資料。
  • columns 就是把宣告的變數項目與完成率資料展開放在一起。
  • colors 的屬性要與 columns 所帶入的 data 名稱相符,這邊為完成率,顏色使用色票,並使用字串形式。
  • size 的屬性設定圖表高度 *30px,不然會全部擠在一起,無法辨識。
  • axis 屬性增加 rotated 的原因是資料太多,改成橫向較好閱讀(所以 X 軸變成 Y 軸位置)。
  • categories 屬性帶入的就是宣告的參賽者變數 category。
  • label 為要帶入的標籤內容與位置。

更多設定可以參考官網範例

function load(columns, category) {
  var chart = c3.generate({
    bindto: "#chart",
    data: {
      columns: [
        [...columns], //完成率與資料展開
      ],
      axes: {
        完成率: "y2",
      },
      type: "bar", //圖表類型
      colors: {
        完成率: "#9CCC65",
      },
    },
    size: {
      height: category.length * 30, //調整圖表高度
    },
    axis: {
      rotated: true, //轉成橫向
      x: {
        type: "category", // 左側 X 軸顯示
        categories: category, //參賽姓名資料
        label: {
          text: "參賽者姓名",
          position: "outer-center",
        },
      },
      y: {
        show: true, //下方 Y 軸顯示
        label: {
          text: "完成率%",
          position: "outer-middle", //名稱位置
        },
      },
      y2: {
        show: true, //上方 Y 軸顯示
        label: {
          text: "完成率%",
          position: "outer-middle", //名稱位置
        },
      },
    },
  });
}

 

完成 Demo

許智庭 Tim Hsu