前言

• 今天我們來畫簡單的折線圖，身為一位生產人員，想知道每個月外銷的商品數量，了解產品在市場中的受歡迎程度。

取得資料

1. 先到經濟部統計處下載 ODS 檔案，剛好外銷訂單海外生產比符合今天要講的主題折線圖。

名詞解釋

什麼是外銷訂單海外生產比呢?
外銷訂單海外生產比就是訂單中有多少比例在海外生產

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

2. 把資料儲存成 csv 格式，再用 Notepad++ 轉換成 UTF8 編碼

開始畫圖

1. 到 https://observablehq.com/ 建立 New notebook
   

2. 上傳資料到 observablehq，檢查輸出資料有沒有亂碼。
   
   

3. 開始畫折線圖，選擇 line chart
   

4. 修改參數

   • 原始參數
     

   • 修改參數

     • aap1 要改成輸入的檔案名 foreign_production
     • X 軸要改成 " 資料時間 "
     • Y 軸要改成 " 總計 (%) "

     

5. 繪製折線圖
   但是圖看起來怪怪的

   • X 軸的時間沒有按照日期先後順序排列

   • Y 軸的值由下往上減少

     

     • 要怎麼處理呢?
       • X 軸時間修改成全部是數字
         
       • 給定 Y 軸的 domain
         

   修改後的圖
   

6. 美化折線圖

   • marker
     • 幫資料加上標示
   • stroke
     • 幫線條上色
   • strokeWidth
     • 調整線條粗細
   • Plot.text()
     • 加上資料點的文字

   
   

結論

• 用 observable 畫時間折線圖
  • 要修改資料的時間格式
  • 修改傳入資料的 x, y 值