JSP 筆記 - 繼定條件下使用 forEach 取得資料與判斷結合 C3.js 應用

將 API 中的完課率、姓名字元長度、完課率級距顯示於圖表。

本次使用的 API。連結

取得完課率資料

預計完成圖表如上圖(有七成的人已經開賽，一起加油!!已經過了半年了!!)。

取得資料

• 宣告 data 變數來存放取得的資料。
• 宣告已開賽與未開賽的變數，並給予 data 的項目名稱，起始為 0。
• 使用 axios 取得 API 資料，並給予判斷，如果進度為 0，就在陣列資料第二筆，未開賽就 +1，若不是為 0，就在以開賽陣列資料第二筆 +1。

  一定要寫陣列的哪個位置 +1，不然 data 名稱只會顯示一個字。

• 執行 C3.js 並把參數帶入。

let data;
let joinCoding = ["已開賽(至少一關)", 0];
let notCoding = ["未開賽(進度0)", 0];

axios.get(dataUrl).then((response) => {
  data = response.data;
  data.forEach((item) => {
    if (item.process == "0%") {
      notCoding[1] += 1;
    } else {
      joinCoding[1] += 1;
    }
  });
  loadC3(joinCoding, notCoding);
});

載入 C3.js

將 joinCoding 與 notCoding 陣列資料展開。

function loadC3(joinCoding, notCoding) {
  c3.generate({
    data: {
      columns: [[...joinCoding], [...notCoding]],
      type: "pie",
    },
  });
}

CodePen https://codepen.io/hnzxewqw/pen/JjGxvaX

取得姓名字元長度

預計完成圖表如上圖(比例將近一半一半)。

取得資料

跟取得完課資料方式大同小異，只是判斷方式不同。

• 因為條件是有包含，所以要判斷成大於等於。
• 取得圖表資料寫法相同，就不再贅述。

let data;
let nameLonger = ["姓名長度為7個(含)以上", 0];
let nameShorter = ["姓名長度為6個(含)以下", 0];
axios.get(dataUrl).then((response) => {
  data = response.data;
  data.forEach((item) => {
    if (item.name.length >= 7) {
      nameLonger[1] += 1;
    } else {
      nameShorter[1] += 1;
    }
  });
  loadC3(nameLonger, nameShorter);
});

CodePen https://codepen.io/hnzxewqw/pen/jOWdxvX

分三個級距，並用兩種圖表顯示

預計完成圖表如上圖(目前有跟上進度的人數不到 2%，大多都落後了…)。

2020.7.22 統計

取得資料

• 分成三種級距，並沒有包含，其中一個有範圍。
• 判斷使用到運算子。
• 使用兩個函式放不同圖表，為了是避免修正樣式結果另一個圖表也壞掉了，帶入的參數一致，資料來源一致。
• 圖表設定方法跟前面相同，只有更換 type，就不贅述。

let finishHigh = ["完課率 50% 以上", 0];
let finishMiddle = ["完課率 21%~49%", 0];
let finishLow = ["完課率 0%~20%", 0];

axios.get(dataUrl).then((response) => {
  data = response.data;
  data.forEach((item) => {
    if (item.process > "50%") {
      finishHigh[1] += 1;
    } else if (item.process > "20%" && item.process < "49%") {
      finishMiddle[1] += 1;
    } else {
      finishLow[1] += 1;
    }
  });
  loadPie(finishHigh, finishMiddle, finishLow);
  loadBar(finishHigh, finishMiddle, finishLow);
});

CodePen https://codepen.io/hnzxewqw/pen/dyGaegN

參考資料

• 字元與字串