lll95123 2014-05-13 11:49 采纳率: 0%
浏览 1026

怎么改下面代码，能读出数据库中的数据并实时显示？

数据是时间对应温度，代码是Jquery的一个example。
菜鸟一只，先谢过大神。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>


        <!-- 1. Add these JavaScript inclusions in the head of your page -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="../js/highcharts.js"></script>

        <!-- 1a) Optional: the exporting module -->
        <script type="text/javascript" src="../js/modules/exporting.js"></script>


        <!-- 2. Add the JavaScript to initialize the chart on document ready -->
        <script type="text/javascript">

            var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        defaultSeriesType: 'spline',
                        marginRight: 10,
                        events: {
                            load: function() {

                                // set up the updating of the chart each second
                                var series = this.series[0];
                                setInterval(function() {
                                    var x = (new Date()).getTime(), // current time
                                        y = Math.random();
                                    series.addPoint([x, y], true, true);
                                }, 1000);
                            }
                        }
                    },
                    title: {
                        text: 'Live random data',
                        style: {
                            margin: '10px 100px 0 0' // center it
                        }
                    },
                    xAxis: {
                        type: 'datetime',
                        tickPixelInterval: 150
                    },
                    yAxis: {
                        title: {
                            text: 'Value'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        formatter: function() {
                                return '<b>'+ this.series.name +'</b><br/>'+
                                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ 
                                Highcharts.numberFormat(this.y, 2);
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    series: [{
                        name: 'Random data',
                        data: (function() {
                            // generate an array of random data
                            var data = [],
                                time = (new Date()).getTime(),
                                i;
                            for (i = -19; i <= 0; i++) {
                                data.push({
                                    x: time + i * 1000,
                                    y: Math.random()
                                });
                            }
                            return data;
                        })()
                    }]
                });


            });

        </script>

    </head>
    <body>

        <!-- 3. Add the container -->
        <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>


    </body>
</html>
  • 写回答

1条回答

  • ChatGPTᴼᴾᴱᴺᴬᴵ 2023-12-08 22:58
    关注

    所有内容均由人工智能模型输出，其内容的准确性和完整性无法保证，不代表我的态度或观点。
    （通义千问专栏，v2.1.0版本）

    该回答引用通义千问大模型，仅提供参考，不保证完全正确
    为了从数据库中读取数据并实时显示，你需要将代码中的示例数据替换为从服务器端获取的动态数据。以下是一个基本的步骤：

    1. 创建一个服务器端脚本来处理请求并从数据库中提取数据。
    2. 修改客户端 JavaScript 代码以向该服务器端脚本发送 AJAX 请求，并在接收到响应后更新图表。

    这里有一个简化的例子来说明如何实现这个功能。假设你已经创建了一个名为 getData.php 的 PHP 脚本，它从数据库中查询数据并返回 JSON 格式的数据。

    首先，修改你的 HTML 文件，将 chart 初始化代码中的静态数据替换为通过 AJAX 获取的数据：

    // 在 $(document).ready 中...
$.ajax({
    url: 'getData.php',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        chart = new Highcharts.Chart({
            // ...其他配置项...
            series: [{
                name: 'Random data',
                data: data
            }]
        });
    },
    error: function(xhr, status, error) {
        console.error('Error loading data:', error);
    }
});

    然后，在 getData.php 中，从数据库中查询数据，并将其转换为 JSON 格式：

    <?php

// 连接到数据库（请根据实际情况修改）
$conn = mysqli_connect("localhost", "username", "password", "database");

// 查询数据
$sql = "SELECT time, temperature FROM your_table ORDER BY time DESC LIMIT 20";
$result = mysqli_query($conn, $sql);

$data = [];

while ($row = mysqli_fetch_assoc($result)) {
    $data[] = [
        strtotime($row['time']) * 1000, // 将时间戳转换为毫秒
        (float) $row['temperature'] // 确保温度值为浮点数
    ];
}

mysqli_close($conn);

// 返回 JSON 数据
header('Content-Type: application/json');
echo json_encode($data);

?>

    注意：这个示例代码使用了 MySQLi 扩展来连接和查询数据库，请确保你的 PHP 安装支持这个扩展。此外，你需要根据你的实际数据库结构和表名来修改 SQL 查询。

    这样，当页面加载时，它会向 getData.php 发送请求，并使用返回的 JSON 数据初始化图表。如果你需要实时更新数据，可以参考原始示例中的 setInterval 函数，定期重新获取数据并更新图表。

    评论

报告相同问题？

悬赏问题

  • ¥15 自动转发微信群信息到另外一个微信群
  • ¥15 outlook无法配置成功
  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换