以『B站直播』为例，实现数据『实时』可视化分析 |
您所在的位置：网站首页 › 直播数据实时 › 以『B站直播』为例，实现数据『实时』可视化分析 |
以『B站直播』为例，实现数据『实时』可视化分析
|
大家好，我是阿辰，上篇文章手把手教你实现『B站直播』弹幕实时分析教会大家如何实现『B站直播』弹幕实时分析 今天这篇文章教大家如何将这些数据进行可视化（同样也是实时可视化） 完整源码会给到大家，获取方式在下方。 先上效果图（点击底部阅读原文可直接看效果）  image.pngB站直播实时数据可视化 （视频已上传到网络：https://www.bilibili.com/video/BV1Xh411D7YN/ 1 弹幕列表 由于数据已经在上篇文章介绍过了，本文就不浪费时间再去重复一遍，本文主要以可视化为主。（由于篇幅问题，这里就只展示核心代码） 代码语言：txt复制 function an6(){ var roomid = $("#roomid").val(); $.ajax({ type: 'GET', data:{"roomid":roomid}, url: "http://139.186.65.249:5000/analyze6", dataType: 'json', success: function(data){ } }); } setInterval("an6()","2000");//1000表示1秒这里是设置2秒采集一次数据 获取弹幕数据 代码语言：txt复制 function listIdF(){ var roomid = $("#roomid").val(); var listId = document.getElementById("listId"); $.ajax({ type: 'GET', data:{"roomid":roomid}, url: "http://139.186.65.249:5000/alldata", dataType: 'json', success: function(data){ document.getElementById("listDateId").innerHTML='时间段：'+data['d1']; var text =''; for(var i=0;i 5){ $(".amiddboxttop_map").css("background-image","url(../static/roomidimg/"+data['picpath']+")"); } } }); } setInterval("find()","3000");//1000表示1秒3秒请求一次数据，并通过JS渲染到html  image.png8 总结 本文主要是讲解了如何将实时数据进行可视化。 |
【本文地址】