首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >将数据添加到数据库,图表应自动更新而不刷新

将数据添加到数据库,图表应自动更新而不刷新
EN

Stack Overflow用户
提问于 2019-05-21 05:43:02
回答 1查看 0关注 0票数 0

我想更新我的图表而不刷新页面。我将数据添加到数据库,图表将自动更新,而无需重新加载页面。每次我将数据添加到数据库时,我都不需要刷新页面以便我获得更新的图表。

$mysqli = new mysqli($host,$user,$pass,$db) or die($mysqli->error);

     $time = '';
    $s01 = '';
    $s02 = '';
    $s03 = '';

    //query to get data from the table
    $sql = "SELECT * FROM `temperature` ";
    $result = mysqli_query($mysqli, $sql);

    //loop through the returned data
    while ($row = mysqli_fetch_array($result)) {

        $time = $time . '"'. $row['time'].'",';
        $sensor01 = $sensor01 . '"'. $row['s01'].'",';
        $sensor02 = $sensor02 . '"'. $row['s2'] .'",';
        $sensor03 = $sensor03 . '"'. $row['s03'] .'",';
    }

     $time = trim($time.",");
    $s01 = trim($s01,",");
    $s02 = trim($s02,",");
    $s03 = trim($s03,",");



             var ctx = document.getElementById("chart").getContext('2d');

                var myChart = new Chart(ctx, {
                type: 'line',
                data: 
                {
                    labels: [<?php echo $time; ?>],
                    datasets: 
                    [{
                        label: 'Sensor01',
                        data: [<?php echo $s01; ?>]
                    },

                    {
                        label: 'Sensor02',
                        data: [<?php echo $s02; ?>]

                    },
                    {
                        label: 'Sensor03',
                        data: [<?php echo $s03; ?>]

                    }]
                },


                options: 
                {
                    responsive: true,
                    scales:{
                        yAxes: [{beginAtZero: false, setinterval: 3000}],
                        xAxes: [{autoskip: true, maxTicketsLimit: 20}]

                },


            });
EN

回答 1

Stack Overflow用户

发布于 2019-05-21 15:01:59

目前,您的前端无法找到数据库已更新的方法。要实现这一目标,有很多方法:

  • 1)最简单的选项:在后台,每隔X秒点击一次端点,查看是否有新数据,并利用Vue反应性更新图表。 非常不推荐。效率低下。这将打到数据库
  • 2)连接到Web套接字服务器以读取带来此新数据的新事件。此事件从您的后端触发,WebSocket服务器充当代理,通知正在侦听这些事件的客户端。查看使用Pusher的本指南,但如果需要,也可以使用Firebase。
  • 3)目前有一个名为Livewire的新软件包,-imo-将使这个过程变得更加容易。虽然没有公开发布。您可以在开发网站Caleb Porzio上获得更新
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/-100006767

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档