iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

用React刻自己的投資Dashboard系列 第 28

用React刻自己的投資Dashboard Day28 - 串接台股技術面API

tags: 2021鐵人賽 React

上一篇刻好版型後,這篇就可以來串接API拉,目標當然就是讓使用者輸入股票代號後,能夠跑出最新收盤價格、漲跌幅度、漲跌幅度百分比,以及最重要的K線圖。

流程說明

台股技術分析的頁面架構如下,Title的部分就是輸入股票代碼的區域,KBarChart的部份則是包含最新收盤價及K線圖。

程式邏輯是先在index.js主檔設定一個state來記錄股票代號,然後將setState的函數透過props傳遞進入Title,當Title輸入股票代號按下送出的時候,會透過函數修改index.js的股票代號state。

而index.js則是會傳遞一個股票代號的state給KBarChart,當這個state被Title改變後,KBarChart就會重新渲染,達到更新頁面資料的效果。

程式部分

直接看GitHub會比較清楚喔,finish taiwan stock kbar chart feature

react-loading套件運用

在程式呼叫API的時候會需要一點點的時間,因此找了一個比較好看的loading animation package,叫做react-loading

有蠻多種會動的圖案可以選擇的,如下圖:

成果展示

  • Demo中畫面

  • 資料載入完成

小結

以上就是台股技術面頁面功能,雖然還來不及把各種技術指標的功能加上去,不過至少有K線可以看,不過完整的看盤功能真的還是需要專業的看盤軟體就是了。

這一頁還有幾個需要改進的地方,第一個是API裡面沒有股票的中文名稱,以及使用者輸入錯誤的代碼時,程式會直接當機,下一篇就會來修改這兩個地方。


上一篇
用React刻自己的投資Dashboard Day27 - 台股技術面刻板
下一篇
用React刻自己的投資Dashboard Day29 - 替股票加上名稱
系列文
用React刻自己的投資Dashboard30

1 則留言

0
juck30808
iT邦新手 3 級 ‧ 2021-10-14 12:10:15

恭喜即將邁入完賽~/images/emoticon/emoticon08.gif

我要留言

立即登入留言