自制Niagara Region地区疫情实时监控面板

前段时间 Niagara Region 对外公布的数据只有一个数字，我就想自己把它记下来，画成图表。面板上线的当天晚上，访问量就破了千，点“加油”的人也不少，就是这数据看着有点扎心……

我的想法

每天都会公布确诊数，所以我可以每天从下面两个网址抓取数据。

$html=@file_get_contents("https://niagararegion.ca/health/covid-19/default.aspx");
$html2=@file_get_contents("https://www.niagarahealth.on.ca/site/covid19casereporting");

用 DOMDocument 轻松获取三个数字

// Confirmed Cases in Niagara
$strCaseNumbers = $xpath->query('//strong[@id="strCaseNumbers"]')->item(0)->nodeValue;
// resolved (have recovered)
$spnResolvedCases = $xpath->query('//strong[@id="spnResolvedCases"]')->item(0)->nodeValue;
// Death
$dNum=trim($xpath2->query('//table/tbody/tr[6]/td[2]')->item(0)->nodeValue);

使用我自己的KDB存入数据库

$data = array(
'date' => date("Y/m/d"),
'strCaseNumbers' => $strCaseNumbers,
'spnResolvedCases' => $spnResolvedCases,
'update_time' => $spnUpdateTime,
'death' => $dNum
);
$db->insert('covid-19-niagara',$data);

数据的抓取就是这么简单

前端用 Chart.js 绘制折线图。我看到不少网站都有“加油”按钮，也想做一个，每点一次，数字就加 1。

<button class="mdc-fab like" id="like" onclick="like();">加油 +1</button>
<script>
function like(){
req=new XMLHttpRequest();
req.onreadystatechange=function(){
if (this.readyState==4 & this.status==200) {
$data=this.response.split("\n");
console.log("Like: "+$data[1]);
document.getElementById("like").innerHTML = "感谢您的加油  "+$data[1]+"次";
}
};
req.open("GET","like.php?add=1");
req.send();
}
</script>

开源以及API调用

项目会开源，也会提供免费的数据 API
API 地址：https://niagara.krunk.cn/api.php
API 返回完整的 JSON 数据，可以直接使用，也可以通过 KDB 调用 (使用请标注来源)

---

访问实时数据面板：https://niagara.krunk.cn/

开源地址

https://github.com/KrunkZhou/COVID19-NiagaraRegion-Dashboard

（开源代码收集数据不易，给个评论呗）

数据来源：Niagara Region, Niagara Health
感谢 Insiderdavidlai 帮助完善数据以及学生会的大力宣传