陌路寒暄

  • 笔记
  • WEB
  • 随笔
  • 访客墙
  • 友情链接
  • 关于
Kratos
这让人揪心的代码
  1. 首页
  2. WEB
  3. 正文

PHP+ajax实现一个实时刷新的数据柱状图

2018年4月10日 8957点热度 2人点赞 1条评论

emmmm,先上个效果图,是以时间为横坐标,温度为纵坐标(点击查看大图):

1.首先要有数据来源,嗯怎么来的就不说了,直接从读取数据库开始说。这一步是利用php实现,直接用php输出json格式的数据,方便后期处理;


$sql = "SELECT * FROM `wd` ORDER BY `id` DESC limit 0,50";//读出数据库里的最后50组数据
    $result = mysqli_query($conn, $sql);
    $res = array();
    while($row = mysqli_fetch_assoc($result)) {
        $t['time']=date("H:i",$row['time']);//这里格式化时间按照个人实际情况来
        $t['curwd']=$row['curwd'];
        array_push($res,$t);
    }
    echo json_encode($res);

2.下面是html和js部分,注释已经尽量清楚了


<body onload="setInterval('refresh()',5000)"> <!--定时刷新-->
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts一个图标绘制工具 -->
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script src="jquery.min.js"></script>//这个自己找一个加上吧
    <script type="text/javascript">
        refresh();//在刚打开页面时进行第一次加载,不然在第一次定时刷新前会白屏
    var myChart = echarts.init(document.getElementById('main')); 
    function refresh(){
        $.ajax({ 
                type: "post", 
                url: "data.php", //获取数据
                dataType: "json", 
                success: function (data) { 
                    //把json中的数据转存到数组中,本来想搞个二维数组,后来把自己搞晕了[/笑哭]
                    function json_time(data){
                        var len=eval(data).length - 1;	//前面说过最后一组不处理
                        var itime=[];
                        for(var i=0;i<len;i++) {
                            itime[i] = data[len-i-1]['time'];//之前是倒序输出的 
                        }
                        return itime;
                    }
                    function json_curwd(data){
                        var len=eval(data).length - 1;
                        var icurwd=[];
                        for(var i=0;i<len;i++) {
                            icurwd[i] = data[len-i-1]['curwd'];                
                        }
                        return icurwd;
                    }
                   
                   var time=json_time(data);
                   var curwd=json_curwd(data);
                    var option = {
                        tooltip: {
                            show: true
                        },
                        legend: {
                            data:['温度']
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data :time
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                "name":"温度",
                                "type":"bar",
                                "data":curwd
                            }
                        ]
                    };
                    // 为echarts对象加载数据 
                    myChart.setOption(option);
                }, 
                error: function (XMLHttpRequest, textStatus, errorThrown) { 
                    alert(errorThrown); 
                } 
            });   
        }
        // 基于准备好的dom,初始化echarts图表  
    </script>
</body>

 

标签: 暂无
最后更新:2020年9月19日

jlqwer

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

jlqwer

当前 -人在线,共打开 -个页面

最新 热点 随机
最新 热点 随机
Ubuntu24.04更换源地址(新版源更换方式) Ubuntu下PHP安装imagick拓展报错 悬浮窗计时器组件 Ubuntu 重启后 ufw状态变为inactive问题 悬浮窗倒计时组件 linux下去除不可见字符“&;#65279”
Ubuntu24.04更换源地址(新版源更换方式)
Windows 修改以太网(本地连接)MAC地址 Ubuntu Apache 切换到php-fpm+mpm_event模式 discuz跳过云平台强制开启QQ互联(QQ登录)QQ互联不能登录的解决方法 自定义Chrome新标签页 Java输入输出优化 打算定居Wordpress了
友情链接
  • 简忆博客 简忆博客
  • Caid Blog Caid Blog
  • 范明明 范明明
  • 翔哥奇思妙想 翔哥奇思妙想
  • 搜索引擎蜘蛛鉴别 搜索引擎蜘蛛鉴别
  • 诗酒趁年华 诗酒趁年华
  • 千千 千千
  • 老董 老董
  • 援军 援军
  • Aidea资讯脉动 Aidea资讯脉动
  • 简忆工具箱 简忆工具箱
  • 搜索引擎蜘蛛IP大全
  • 深海小涛 深海小涛

COPYRIGHT © 2025 陌路寒暄. ALL RIGHTS RESERVED. Theme Kratos Made By Seaton Jiang

鲁公网安备 37131202371485号 | 鲁ICP备16042736号-1 | doNotClick