JS特訓-DAY35-圓餅圖與長條圖合併使用

前言

優化完課率的圖表設計

取得資料

• 分成三種級距，finishHigh 完課率 50% 以上，finishMiddle 完課率 21%-49%，finishLow 完課率 0%-20%。
• 判斷使用到運算子。
• 使用兩個函式 loadPie() 及 loadBar() 放不同圖表，為了是避免修正樣式結果另一個圖表也壞掉了，帶入的參數一致，資料來源一致。
• 圖表設定方法跟前面相同，只有更換 type，就不多加說明了。

let dataUrl = "https://raw.githubusercontent.com/hexschool/hexschoolNewbieJS/master/data.json";
let data;
let finishHigh = 0;
let finishMiddle = 0;
let finishLow = 0;

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

CodePen