前言

今天的主題延續昨天的資料，但是畫出總計無法知道每個產品的外銷數量比，所以本日重頭戲就是要將資料做分類。

取得資料

1. 到經濟統計數據分析系統下載資料
   

   • 經濟部統計處
     https://dmz26.moea.gov.tw/GA/visualize/VisDashboard.aspx?d=16

2. 把資料轉換成 UTF8 編碼的 csv 檔案

整理資料

1. 查詢多系列折線圖的範例，資料分成x, y, z 三個欄位
   
   
   

2. 開始整理資料

• 原始資料有多個欄位

  資料時間	總計	化學品	塑橡膠製品	基本金屬製品	電子產品	資訊通信產品	光學器材	機械
  110-07	50.09	8.73	9.86	8.03	42.25	89.44	46.57	16.66

  

• 用 flatMap() 把資料整理成三欄

  參考
  [Day 3] 分群的 “D3” 直條圖
  https://ithelp.ithome.com.tw/articles/10288531
  Array.prototype.flatMap()
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap

  資料時間	分類	海外生產比

  110-07 | 化學品 | 8.73
  110-07 | 塑橡膠製品 | 9.86
  110-07 | 基本金屬製品 | 8.03
  110-07 | 電子產品 | 42.25
  110-07 | 資訊通信產品 | 89.44
  110-07 | 光學器材 | 46.57
  110-07 | 機械 | 16.66

  categories = [ "化學品", "塑橡膠製品", "基本金屬製品", "電子產品", "資訊通信產品", "光學器材", "機械" ]
  foreign_production_categories = categories.flatMap(    
      分類 => foreign_production_raw_data.map(
          d => ({
              資料時間: d.資料時間,
              分類,
              海外生產比: d[分類]
          })
      ))
  

  

開始畫圖

1. 選擇 multi-series line chart
   

2. 修改參數
   x: 資料時間, y: 海外生產比, z: 分類
   指定 y domain: [0, 100]
   
   

3. 美化折線圖