JS特訓-DAY32-程式整合篇

前言

此次需將清單與圖表整合再一起，兩邊需同步顯示

程式碼整合

主要要整合的是下方兩個片段程式碼，相關說明可以參考這篇

選擇清單

select 清單判斷條件與資料處理

function sortData(data, select) {
  if (select === "id") data.sort((a, b) => parseInt(a.id) - parseInt(b.id));
  else if (select === "process")
    data.sort((a, b) => parseFloat(b.process) - parseFloat(a.process)); //四捨五入，取小數點後兩位

  data.forEach((item) => {
    columns.push(parseFloat(item.process) / 100); //完成率資料取得小數點後兩位後，變百分比呈現
    category.push(item.name); //把參賽者資料推到參數中
  });
}  

C3.js 圖表

要匯入圖表的條件，參數會帶入 C3 中執行，C3 圖表程式碼略過不貼上來

let columns = ["完成率"]; //data 對應名稱與存放數據資料用
let category = []; //參賽者姓名資料

function sortC3(data) {
  data.sort((a, b) => parseFloat(b.process) - parseFloat(a.process)); //完成率資料排序，多到少
  data.forEach((item) => {
    columns.push(parseFloat(item.process) / 100); //完成率資料取得小數點後兩位後，變百分比呈現
    category.push(item.name); //把參賽者資料推到參數中
  });
}  

整合前思考

誰是主要驅動的程式碼?

合併兩個程式碼需要思考怎麼將兩者連動做到同步顯示，以常理判斷會先選擇透過 select 選到想要的條件後，右邊的圖表會跟著切換

主要是 select 在控制

釐清 select 是主要的條件後，所以要把圖表整合到 select 裡面，兩者整合後就變成下方程式碼：

• 可見到中間區域的條件判斷使用的內容幾乎一樣
• 所以只有把圖表要用的兩個變數拿過來用
• 剩下的判斷與資料處理沿用清單的程式碼
• 最後帶入 C3.js 圖表的函式

function sortData(data, select) {
  let columns = ["完成率"]; //data 對應名稱與存放數據資料用
  let category = []; //參賽者姓名資料

  if (select === "id") data.sort((a, b) => parseInt(a.id) - parseInt(b.id));
  else if (select === "process")
    data.sort((a, b) => parseFloat(b.process) - parseFloat(a.process)); //四捨五入，取小數點後兩位

  data.forEach((item) => {
    columns.push(parseFloat(item.process) / 100); //完成率資料取得小數點後兩位後，變百分比呈現
    category.push(item.name); //把參賽者資料推到參數中
  });
  load(columns, category); //C3 的函式
}  

最後就可以得到想要的結果了！

CodePen