JS特訓-DAY33-圓餅圖分析(參賽比例)

前言

透過 API 來觀察，尚未開賽跟已開賽的比例佔多少，並繪製成圓餅圖

取得資料

• 宣告 data 變數來存放取得的資料。
• 宣告已開賽與未開賽的變數，起始為 0。
• 使用 axios 取得 API 資料，並執行兩個函式，countAll()是判斷參賽者完成的%數，renderChart()是繪製圓餅圖
• 最後增加除錯功能

const api ="https://raw.githubusercontent.com/hexschool/hexschoolNewbieJS/master/data.json";
let Data = [];
let started = 0;
let unstart = 0;

axios.get(api).then((response) => {
    Data = response.data;
    countAll();
    renderChart();
  })
  .catch((err) => {
    console.log(err);
  });  

參賽者完成比例判別函式

• 如果進度為 0，未開賽就 +1，若不是為 0，開賽就 +1

function countAll() {
  Data.forEach((item) => {
    if (parseInt(item.process) === 0) {
      unstart += 1;
    } else {
      started += 1;
    }
  });
}  

載入 C3.js 繪製圓餅圖

• columns陣列裡面放兩個參數，
  前者：參賽者進度名稱定義，後者：宣告的變數名稱

function renderChart() {
  const chart = c3.generate({
    data: {
      columns: [
        ["0% 進度參賽者", unstart],
        ["至少過一關以上的參賽者", started]
      ],
      type: "pie"
    }
  });
}

CodePen