iT邦幫忙

2

小前端作業簿-寫一個自動產生股市漲跌圖的程式。

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

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

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

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

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

https://ithelp.ithome.com.tw/upload/images/20200811/2012929079sLBB6XZ6.png

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

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

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

https://ithelp.ithome.com.tw/upload/images/20200811/20129290xu6ahWyGzr.png

目前已經成功讓輸入股票代號時跑出個別的圖表,預估未來工作項目是調整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選取不同圖表。


1 則留言

0
player
iT邦大師 1 級 ‧ 2020-08-12 23:39:37

D3.js的K線圖範例 (股市的圖大概都這樣風格,不過K線圖在台灣與其它地方,顏色可能不盡相同)
https://observablehq.com/@d3/candlestick-chart
你自己加油吧

維基百科K線圖
https://zh.wikipedia.org/wiki/K%E7%BA%BF

我要留言

立即登入留言