satori/hangban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

合并

Browse Source
This commit is contained in:
satori
2024-12-07 07:35:24 +08:00
parent 2e8d37b416
commit 8c54737e5f
2 changed files with 78 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
index.html
View File

@@ -1,5 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<style> <html>
<head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>航班</title>
<style>
table { table {
margin: 20px; margin: 20px;
padding: 1rem; padding: 1rem;
@@ -7,5 +13,67 @@
border-radius: .5rem; border-radius: .5rem;
border-spacing: 10px; border-spacing: 10px;
} }
</style> </style>
<script type="module" src="main.js"></script> </head>
<body>
<script type="module">
import Chart from 'chart.js/auto'
import { createElement, div, table, thead, tbody, tr, th, td } from '@laniakeasupercluster/widgets'
const rest = await fetch('http://localhost:2000/api').then(res => res.json())
document.body.appendChild(div.childs([
table.childs([
thead.childs([
tr.childs([
th.text('ID'),
th.text('航班号'),
th.text('航空公司'),
th.text('起飞机场'),
th.text('到达机场'),
th.text('数据')
])
]),
tbody.childs(
rest.map(row => tr.childs([
td.text(row.flight_id),
td.text(row.flight_number),
td.text(row.airline),
td.text(row.origin),
td.text(row.destination),
td.text(row.shuju)
]))
)
])
]))
const metrics = await fetch('http://localhost:2000/api/metrics').then(res => res.json())
const context = createElement({ width: 800, height: 200 }, 'canvas')
new Chart(context, {
type: 'line',
data: {
labels: metrics.map(row => new Date(row.date).toLocaleDateString()), // 显示日期
datasets: [{
label: '航班数量',
data: metrics.map(row => row.count), // 使用 count 作为数据
backgroundColor: 'rgba(255, 99, 132, 0.2)', // 曲线下方填充颜色（透明度0.2）
borderColor: 'rgba(255, 99, 132, 1)', // 曲线颜色
borderWidth: 2, // 曲线宽度
lineTension: 0.3, // 平滑曲线
fill: true // 填充曲线下方区域
}]
},
options: {
scales: {
y: { beginAtZero: true }
}
}
})
document.body.appendChild(context)
</script>
</body>
</html>

54
main.js
View File

@@ -1,54 +0,0 @@
import Chart from 'chart.js/auto'
import { createElement, div, table, thead, tbody, tr, th, td } from '@laniakeasupercluster/widgets'
const rest = await fetch('http://localhost:2000/api').then(res => res.json())
document.body.appendChild(div.childs([
table.childs([
thead.childs([
tr.childs([
th.text('ID'),
th.text('航班号'),
th.text('航空公司'),
th.text('起飞机场'),
th.text('到达机场'),
th.text('数据')
])
]),
tbody.childs(
rest.map(row => tr.childs([
td.text(row.flight_id),
td.text(row.flight_number),
td.text(row.airline),
td.text(row.origin),
td.text(row.destination),
td.text(row.shuju)
]))
)
])
]))
const metrics = await fetch('http://localhost:2000/api/metrics').then(res => res.json())
const context = createElement({ width: 800, height: 200 }, 'canvas')
new Chart(context, {
type: 'line',
data: {
labels: metrics.map(row => new Date(row.date).toLocaleDateString()), // 显示日期
datasets: [{
label: '航班数量',
data: metrics.map(row => row.count), // 使用 count 作为数据
backgroundColor: 'rgba(255, 99, 132, 0.2)', // 曲线下方填充颜色（透明度0.2）
borderColor: 'rgba(255, 99, 132, 1)', // 曲线颜色
borderWidth: 2, // 曲线宽度
lineTension: 0.3, // 平滑曲线
fill: true // 填充曲线下方区域
}]
},
options: {
scales: {
y: { beginAtZero: true }
}
}
})
document.body.appendChild(context)