如何删除Highcharts图表并保留HTML中温湿度传感器实时数值？

问题背景 #

参考Flask+Highcharts示例实现传感器数值展示后，希望仅保留显示温度（Temp）和湿度（Hum）的数值块，但删除图表后实时数值同步停止更新，需调整代码实现纯数值的实时刷新。

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>Flask App</title>

    <!-- Bootstrap 样式 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-5 jumbotron p-2 mx-1 d-flex align-items-center justify-content-center">
                <h1 class="sensor1">Temperature : --</h1>
            </div>
            <div class="col-5 jumbotron p-2 mx-1 d-flex align-items-center justify-content-center">
                <h1 class="sensor2">Humidity : --</h1>
            </div>
        </div>
    </div>

    <style>
        .jumbotron{
            width: 150px;
            height: 220px;
        }
    </style>

    <script>
        function requestData() {
            // Ajax请求获取Flask后端数据
            $.get('/data').done(function(result) {
                // 提取温度和湿度值
                const temperature = Math.round(result[1]);
                const humidity = Math.round(result[2]);

                // 更新页面上的数值显示
                $(".sensor1").text(`Temperature : ${temperature}`);
                $(".sensor2").text(`Humidity : ${humidity}`);

                // 2秒后再次请求，实现实时更新
                setTimeout(requestData, 2000);
            });
        }

        // 页面加载完成后立即启动数据请求
        $(document).ready(function() {
            requestData();
        });
    </script>
</body>
</html>

Python后端代码（无需修改） #

from flask import Flask, render_template, make_response
import random
import json
from time import time

app = Flask(__name__)

@app.route('/', methods=["GET", "POST"])
def main():
    return render_template('index.html')

@app.route('/data', methods=["GET", "POST"])
def data():
    # 数据格式：[时间戳, 温度, 湿度]
    Temperature = random() * 100
    Humidity = random() * 55
    data = [time() * 1000, Temperature, Humidity]
    
    response = make_response(json.dumps(data))
    response.content_type = 'application/json'
    return response

if __name__ == "__main__":
    app.run(debug=True)

关键修改说明 #

• 移除Highcharts依赖：删除所有Highcharts相关的JS引入、图表容器及初始化代码，不再依赖图表load事件触发数据请求。
• 简化数据更新逻辑：requestData函数仅保留核心的Ajax请求和数值更新代码，移除所有操作图表的冗余逻辑。
• 主动触发数据请求：页面加载完成后直接调用requestData，通过setTimeout实现定时重复请求，保证数值实时刷新。
• 优化布局样式：调整Jumbotron的布局样式，让数值显示更居中美观。

内容的提问来源于stack exchange，提问作者Micfil