用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里面没有股票的中文名称,以及使用者输入错误的代码时,程序会直接当机,下一篇就会来修改这两个地方。


<<:  [DAY28] 战略设计的别扭事件

>>:  【Day 27】Hook 07:useMemo

解决QEMU:Failed to open module: ........的问题

问题: 照着https://wiki.debian.org/QEMU 的教学 输入这两行指令没问题 ...

Day 11 | Dart 非同步 - Stream

Stream 简单来说就是一群iterable的非同步事件。 像是每秒输出一个数字,但是你可能会想说...

伸缩自如的Flask [day 26] Flask with ML

github: https://github.com/wilsonsujames/ML_on_web...

[C 语言笔记--Day20] 解题纪录 10190 Divide, But Not Quite Conquer!

题目连结 程序码: #include <iostream> using namespac...