對前端工作者來說，現在是個很便利的時代，各種公開資訊會做成API讓有心使用資料的民眾去串接，比如疫情時期政府便有放上藥局口罩存量的API在政府網頁，由此許多民間的前端工程師便依此做出許多精美的口罩地圖。

取得資訊便利，自然就可以利用這些資料做出便民的圖表。

股市資訊也是其中一個例子，因為先前試著做過口罩地圖，在這個經驗下想再做一個獲取API資訊產生圖表的程式，

於是這次選擇了串股市公開交易資訊平台的API，初步的發想是要做個讓使用者輸入欲查詢個股的代號，接著跑出該個股在當月份的股價漲跌圖。

API的途徑來自這裡，台灣證券交易所的網站，台灣證交所網站是個提供很多股市資訊的地方，這些資料都有JSON格是可以取得：

在框架的部分，小弟打算採取工作時不會用到卻很便利的Vue.js，產生圖表的套件則用D3.js。

究竟Vue.js和D3.js在合用上會產生什麼效果呢？連我自己也很期待。

先附上2020/08/11號目前的進度：

目前已經成功讓輸入股票代號時跑出個別的圖表，預估未來工作項目是調整UI畫面，讓圖表更好地融入Neumorphism風格中。

附上程式碼：
https://github.com/May27Oliver/stock_chart

這個過程中學習到

一、如何處理串接api時會有的不同源的問題
二、如何用D3.js產生向量圖
三、Vue.js Component 與父層之間資料傳遞與函式調用的方式，如何使用$refs、props等Vue。
四、D3.js的select選取的是畫面上第一個class名稱為stock-table的圖表，要如何讓select選取到Component生成的下一張圖表，這裡想了一下，最後採取了v-bind:class的選取器策略，讓select選取不同圖表。