第三十四關：圓餅圖分析

情境：

禿頭俠：「客戶又有奇怪需求了.. 他說他搜集以下的圖表」
小杰：「來吧來吧~~ 再奇怪的需求我都不怕了~~」

題目

客戶說，他想要觀察每個參賽者的「姓名長度的字元數」，規則如下：

如何判斷字元數量，請將你找到的部落格文章放到此處提供給其他勇者參考

• 判斷中英文字元長度
• 正規表示式除字串中所有標點符號 如果中文取代 **,注意正規表示 * 要刪掉避免錯誤
• 正則表達式的規則 - 這邊只要注意特殊字符有哪些即可
• 正則表達式介紹
• 使用 String.prototype.charCodeAt() 判斷字元是中文或英文 - 判斷字元是否超過 255 超過即代表為中文(缺點為需要把字元一個一個拆開)
• replace() 方法 - 講解 replace() 的用法
• 正則匹配範例

參考解答

<div id="chart"></div>

須引入檔案： https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.min.css https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.min.js

var url =
  "https://raw.githubusercontent.com/hexschool/hexschoolNewbieJS/master/data.json";
let overSevenNum = 0;
let underSevenNum = 0;

axios.get(url).then((res) => {
  res.data.forEach((item) => {
    if (item.name.replace(/[^\x00-\xff]/g, "**").length <= 6) {
      underSevenNum += 1;
    } else {
      overSevenNum += 1;
    }
  });
  load();
});

function load() {
  let chart = c3.generate({
    bindto: "#chart",
    data: {
      columns: [
        ["參賽者姓名在6個(含)字元數以下", underSevenNum],
        ["參賽者姓名在7個(含)字元數以上", overSevenNum]
      ],
      //自訂圖表類型
      type: "pie"
    }
  });
}