简并绘制

main.js

@@ -1,64 +1,49 @@
 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())
-const table = document.createElement('table')
+document.body.appendChild(div.childs([
+    div.text('航班信息'),
+    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 thead = document.createElement('thead')
-const tr = document.createElement('tr')
-for (let key in rest[0]) {
-    const th = document.createElement('th')
-    th.textContent = key
-    tr.appendChild(th)
-}
-thead.appendChild(tr)
-table.appendChild(thead)
-
-// 添加数据
-for (let row of rest) {
-    const tr = document.createElement('tr')
-    for (let key in row) {
-        const td = document.createElement('td')
-        td.textContent = row[key]
-        tr.appendChild(td)
-    }
-    table.appendChild(tr)
-}
-
-// 写入页面
-document.body.appendChild(table)
-
-
-// 生成随机数据
-function generateRandomData(num, minPrice, maxPrice) {
-    const data = [];
-    const today = new Date();
-    for (let i = 0; i < num; i++) {
-        const randomDays = Math.floor(Math.random() * 30); // 随机天数
-        const newDate = new Date(today.getTime() + randomDays * 24 * 60 * 60 * 1000); // 增加随机天数
-        const price = Math.floor(Math.random() * (maxPrice - minPrice + 1)) + minPrice; // 随机价格
-        data.push({
-            date: newDate.toISOString().split('T')[0], // 格式化为 YYYY-MM-DD
-            price: price
-        });
-    }
-    return data;
-}
-
-// 生成 10 条随机数据
-const numEntries = 10;
-const data = generateRandomData(numEntries, 100, 500);
 
 // 创建图表
-const ctx = document.createElement('canvas');
+const context = createElement({
-document.body.appendChild(ctx);
+    width: 800,
-new Chart(ctx, {
+    height: 200,
+}, 'canvas')
+
+document.body.appendChild(context)
+new Chart(context, {
     type: 'line',
     data: {
-        labels: data.map(row => row.date),
+        labels: metrics.map(row => new Date(row.date).toLocaleDateString()), // 显示日期
         datasets: [{
-            label: '航班价格',
+            label: '航班数量',
-            data: data.map(row => row.price),
+            data: metrics.map(row => row.count),         // 使用 count 作为数据
             backgroundColor: 'rgba(255, 99, 132, 0.2)',  // 曲线下方填充颜色（透明度0.2）
             borderColor: 'rgba(255, 99, 132, 1)',        // 曲线颜色
             borderWidth: 2,                              // 曲线宽度
@@ -73,5 +58,4 @@ new Chart(ctx, {
             }
         }
     }
-});
+})
-

package.json

@@ -10,6 +10,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@laniakeasupercluster/widgets": "^1.1.5",
     "chart.js": "^4.4.7",
     "cors": "^2.8.5",
     "express": "^4.21.2",

server.js

@@ -26,6 +26,11 @@ app.get('/api', async (req, res) => {
     res.json(rows)
 })
 
+app.get('/api/metrics', async (req, res) => {
+    const [rows] = await db.query('SELECT date, COUNT(*) AS count FROM flight_price_history GROUP BY date')
+    res.json(rows)
+})
+
 // 启动应用
 app.listen(2000, () => {
     console.log('服务已启动成功 http://localhost:2000/api')