📈 我开源了一个简单的冠状病毒(COVID-19)仪表板(React + Chart.js + BootstrapTable)

2025-05-28

📈 我开源了一个简单的冠状病毒(COVID-19)仪表板(React + Chart.js + BootstrapTable)

我最近开源了一个新的📈冠状病毒(COVID-19)仪表板,它显示了每个国家冠状病毒分布的动态(图表的曲率)。

推理

创建新仪表板的原因是为了补充著名的JHU 仪表板confirmed(由约翰霍普金斯 CSSE 制作),其功能是查看每个国家/地区 COVID-19 / recovered/deaths用例数量的图表。

基本上,我个人有一个问题,例如“荷兰/乌克兰怎么样?”“病毒传播(增长因素)是否正在减缓?”“如何比较每个国家的康复/死亡动态?”“哪些国家正在采取适当的措施来减缓增长因素”

主要功能如下:

冠状病毒 (COVID-19) 仪表板演示

数据源和技术栈

该仪表板使用约翰霍普金斯大学 CSSE 的 COVID-19(2019-nCoV)数据存储库作为数据源。

前端方面,我尽量简化,因此仪表盘使用了纯React.js(没有使用JSX转译器或CreateReactApp启动器)。为了显示数据,我使用了Charts.js绘制图表,并使用Bootstrap Table来显示可排序、可搜索、可点击的数据表。

主要功能

仪表板仍处于原始状态,但它提供了显示全球和每个国家数据图表的基本功能。

例如,以下是截至 3 月 23 日全球确诊/康复/死亡用例的动态:

全球数据

我们可能会看到中国(湖北)的积极动态:

中国 - 湖北统计数据

我们还可以比较意大利和西班牙:

意大利和西班牙的统计数据

区域以可排序、可搜索、可点击的数据表形式显示:

数据表

已知问题

以下功能尚未实现,但它可以提高仪表板的可用性:

  • 按国家对地区进行分组,以查看整个美国、中国等的汇总统计数据(目前美国的统计数据按州划分)
  • 一键重置地区/国家选择
  • 将选定的过滤器放入 URL,以便仪表板链接可共享(使用预先选定的过滤器)
文章来源:https://dev.to/trekhleb/i-ve-open-sourced-a-simple-coronavirus-covid-19-dashboard-react-chart-js-bootstraptable-4i49
PREV
不到 500 行代码即可实现自动泊车
NEXT
您应该拥有的 15 多个 Chrome 扩展程序。