程序员经验分享-hwhale

使用 Web 套接字在浏览器中创建图形

2024-01-12

我正在尝试寻找可以在网络浏览器中创建条形图的示例或工具。我将通过网络套接字从服务器发送数据，当接收到数据时，我希望每个条形的“高度”发生变化，以反映接收到的数据。

因此，用户可以看到图表随着数据的接收而变化。

我见过很多例子，但我看不到一个能够实现上述目的的例子。像 D3 这样的东西看起来确实不错，但似乎有一个陡峭的学习曲线，而且似乎有很多东西让人很困惑。

我正在寻找一些简单而快速的事情。

Thanks


你真正需要做的是找到一个简单的图表库，它支持某种形式的redraw或者绑定数据模型并检测该模型的更改的方法。常见步骤是：

  1. 使用初始数据集创建图表对象
  2. 绘制初始图表
  3. 通过 WebSocket 连接获取更新
  4. 更新数据集
  5. 重绘图表

复杂性往往来自于库，因为一般过程非常简单。

一些例子

可以通过 .net 杂志教程找到仅实时显示投票和更新的实时图表示例使用 HTML5 WebSocket 编写实时调查代码 http://www.netmagazine.com/tutorials/code-real-time-survey-html5-websockets。它用Pusher http://pusher.com，我为谁工作。

这里还有一个使用 DJ、Python、Pusher 和 Twitter 流 API 的示例：http://bieber.nixonmcinnes.co.uk/ http://bieber.nixonmcinnes.co.uk/

代码可以在这里找到：https://github.com/nixmc/pusher-d3-demo https://github.com/nixmc/pusher-d3-demo

博客文章在这里：http://www.nixonmcinnes.co.uk/2012/04/20/what-c​​an-we-learn-from-the-real-time-web-and-justin-bieber/ http://www.nixonmcinnes.co.uk/2012/04/20/what-can-we-learn-from-the-real-time-web-and-justin-bieber/

最简单的例子

还有一个使用 Pusher 的视频冰沙图表 http://smoothiecharts.org/ here: http://www.youtube.com/watch?v=VLTsT30TZYw http://www.youtube.com/watch?v=VLTsT30TZYw

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

Graph

WebSocket

使用 Web 套接字在浏览器中创建图形 的相关文章

  • 使用 lambda 更新 amazon s3 对象元数据而不执行对象复制？

    是否可以使用 lambda 函数添 加或更新 s3 对象元数据而不复制对象 这篇 2 年前的帖子说我们确实需要复制一份 https stackoverflow com questions 32646646 how do i update m

  • 如何将毫秒转换为可读的日期？

    下列 new Date 1324339200000 toUTCString Outputs Tue 20 Dec 2011 00 00 00 GMT 我需要它返回Dec 20 除了我可以使用的更好的方法之外toUTCString 我正在寻找

  • 任何 JavaScript 代码都是有效的 TypeScript 代码吗？

    目前我已经开始学习TypeScript 从我研究过的文档来看TypeScript 我看到一些纯的样品JavaScript代码可以编译为TypeScript code 我的问题是 TypeScript 语言的设计方式是否使任何 JavaScr

  • 为什么 Bootstrap 需要 jQuery？ [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我已经多次用谷歌搜索这个问题 但从未找到满意的答案 大多数答案似乎只是说 是的 Bootstrap 插件确实需要 jQuery https st

  • 在 IE 中使用
    标签时，填充不起作用

    我在我的应用程序中使用 HTML5 标签 标签的填充在 chrome ff 和 safari 中工作正常 但在 IE 中不起作用 我尝试添加显示 块 与部分样式 但它没有用 有什么解决办法吗 许多旧浏览器不理解 HTML5 标签 例如sec

  • 节省页面加载时间的提示[重复]

    这个问题在这里已经有答案了 我的问题 削减那些不必要的 kb 并使页面加载速度更快的最佳方法是什么 全部是什么优化实践 编码实践 在js php中 如果执行可以使您的页面更轻 为什么我问这个 我读了这篇关于 jquery js 与 jque

  • 将 DIV 堆叠在一起？

    是否可以堆叠多个 DIV 例如 div div div div div div div div div div 那么所有这些内部 DIV 都具有相同的 X 和 Y 位置吗 默认情况下 它们都在彼此下方 将 Y 位置增加了上一个 DIV 的高

  • 用于验证网络路径的正则表达式 PHP、jQuery、JavaScript、Ruby

    尝试找出用于验证网络路径的正则表达式 即 comp xyz or comp or comp x y z storage或者所有部分都更长的东西 但希望能够传达其要点 我目前拥有的是一个简单的输入字段 用户可以通过它传递信息 事情是我不希望他

  • c3js数据标签的位置

    有没有可能的方法来更改数据上方标签的位置c3条形图 在官方文档中 很好地解释了如何通过操作 y 和 x 整数来更改 x 和 y 测量轴上标签的位置 但我没有找到任何数据标签 我试图用简单的方式指出它d3其上c3是基于但是console lo

  • 如何在没有查询参数的情况下重新加载页面？

    假设我想重新加载www domain com abc num 4 但我想重新加载www domain com abcONLY 问号后没有所有内容 window location window location href split 0

  • Boolean("false") 返回 true..还有其他选择吗？

    我正在使用 jquery 将 true 和 false 字符串写入 data html 属性 但是 当我将 false 写入其中一个属性 然后检查它是否为 false 时 它 会返回 true 我还在网上读到它应该这样做 这真的毫无意义 有

  • 保留以下文本的标题

    我正在使用 css 列计数功能将我的部分分成两列 在一个页面上 我在第一列的底部有一个 h3 标题 在下一列的顶部有一个 p 段落 我想保留该段落的前几句话的标题 我可以将其与整个段落一起包装在使用 inline block 样式的 div

  • IE 开发工具断点不起作用

    我正在尝试在 IE 11 中调试一些 javascript 但无法强制它在断点处停止 debugger 行工作正常 停止该行中的调试器 相同的文件没有debugger 行但在同一位置设置断点不会执行任何操作 功能正常 但调试器不会在断点处停

  • 401 未经授权的帖子回复

    我一直在使用 Angular 模板制作 Node js 网站 但我无法在 DB Mongo 上创建数据 这是代码 节点路由 var Property mongoose model Property var jwt require expre

  • 如何清除画布中图像上的矩形

    我需要清除画布中图像上绘制的矩形 而不损坏现有图像 我可以绘制小矩形点并将其清除 但问题是 当我清除矩形时 它在图像上仍保留为白色小斑点 有人可以告诉我如何清除图像上的矩形而不损坏现有图像 我使用了以下方法来清除矩形 但没有用 1 cont

  • 使 html svg 对象也成为可点击的链接（在 iPhone 上）

    这个问题与使 html svg 对象也成为可点击的链接 https stackoverflow com q 11374059 4825796 但给出的答案似乎不适用于 iPhone ios 9 3 safari 和 chrome 浏览器 我

  • 检测未定义的对象属性

    如何检查 JavaScript 中的对象属性是否未定义 检查属性值是否为特殊值的常用方法undefined is if o myProperty undefined alert myProperty value is the special

  • 如何找出javascript中加载了哪些javascript？

    继另一个问题的评论之后 我问自己是否有办法获取页面上加载的所有 js 代码的列表 就像 Firebug 或 chrome Inspector 所做的那样 有没有一种纯javascript的方法 一种方法是抓取脚本标签 但这样你可能会错过动态

  • 使用来自Processing-JS的JSON

    我想使用编写一个应用程序处理 JS http processingjs org 并且我希望能够使用服务器端数据加载它 我还没有编写服务器端 所以我可以使用任何东西 但似乎明显的 AJAX 事情是使用 JSON 将数据上传到页面中 如何从我的

  • 为什么插入符号在具有position:relative的contenteditable中不可见？

    When a contenteditable元素有position relative和背景颜色 插入符号放置在该元素中时是不可见的 这是一个例子 bug position relative background color lightgre

随机推荐

  • CSS 转换导致 div 在 Safari 中重叠？

    为什么transform rotateY 导致 div 仅在 Safari 中重叠 以下是一些屏幕截图 可以更好地解释 它应该是什么样子 它不应该是什么样子 仅出现在 Safari 中 这是非常奇怪的行为 我已经删除了transform r

  • Discord.py on_member_join 没有响应

    我正在使用一个 client event为我的功能on member join事件 我希望它在用户加入时发送消息 但是控制台没有响应或错误 这是我当前尝试的代码 client event async def on member join m

  • Java 中的 String[] args 有什么意义？

    每当您在类中声明 main 方法时 您总是必须执行String名为 args 的数组 重点是什么 除非我生活在岩石下 否则 Java 中的命令行参数几乎不再使用 当我尝试运行这个时 this program won t compile pu

  • C# 给定货币代码格式化货币（如 USD / GBP / FRF）

    我正在与返回货币的数据库集成 System Decimal 和货币代码 货币代码是类似的字符串 USD GBP 乃至 FRF mscorlib 是否有内置的东西可以帮助我格式化这些货币 我首先想到的是在数据库货币代码和CultureInfo

  • 使用 vscode 作为 sops 的编辑器

    我似乎无法得到sops跟 共事Visual Studio Code作为其编辑 vscode已经在PATH 然而 sops在控制台上打印解密的内容 而不是打开编辑器 c gt code this opens the Visual Studio

  • Node.js 子进程问题与参数 - 引号问题？，FFMPEG 问题？

    我需要能够从 Node js 应用程序执行 FFMPEG 我相信这个问题可能与正确指定命令行参数有关 而不是特定于 FFMPEG 但由于我无法缩小问题范围 所以我提出了我的整个问题 我可以执行以下命令从命令提示符成功 C Brad ffmp

  • 如何在 LaTeX 中对段落进行编号？

    给出一堆段落 Para A Para B Para C 如何让 LaTeX 自动对它们进行编号 即 1 Para A 2 Para B 3 Para C 我看过以下建议 newcounter parnum newcommand N noin

  • python 日志文件中的“无”

    我正在使用loggingpython 中的模块 当我在命令行上使用错误的参数调用脚本时 日志文件在某些 时候包含单个单词 None 我不知道它来自哪里 这是我的代码切割 我在其中执行logging exception Show script

  • 有时不会调用 UISplitViewControllerDelegate 中的 willHideViewController

    我有个问题 我的应用程序是一个选项卡栏控制器 它的第一个视图控制器是一个分割视图控制器 这对苹果来说似乎不太好 因为文件说分割的 voew 控制器必须是根 所以也许这就是我的问题的原因 问题是 有时 不会调用 UISplitViewCont

  • 如何在 Kendo 网格中自动启用或禁用滚动条？

    这是我创建网格的代码 if Model GenericEntityList Count gt 0 Html Kendo Grid Model GenericEntityList Name screenNames ToString Colum

  • python 中 select 的 CPU 使用率达到 100%

    我在 python 中的 select 有问题 我有一段代码允许客户端从服务器接收数据 并通过在 stdin 上读取并在服务器套接字上写入来发送数据 readfds s sys stdin writefds s sys stdout my

  • 了解 JMH 输出

    因此 我对几种方法运行了 JMH 基准测试 并得到了如下响应 我无法理解到底是什么Score and Error值表示 有相同的参考文档吗 举个例子 ss stream带参数n 100000花了约 平均运行 30 次迭代需要 1 363 微

  • 如果将 UIView 添加为子视图，则 UIButton 目标不起作用

    我有一个UIButton 它有两个子视图 然后我打电话 createButton addTarget self action selector openComposer forControlEvents UIControlEventTouc

  • Java 重新排序会影响 System.currentTimeMillis() 吗？

    根据Java内存模型 指令可以重新排序 只要执行格式良好的 http docs oracle com javase specs jls se7 html jls 17 html jls 17 4 7 所以我想知道 以下代码是否可能产生以下输

  • Spark聚合函数——aggregateByKey是如何工作的？

    假设我有一个分布在 3 个节点上的系统 并且我的数据分布在这些节点之间 例如 我有一个 test csv 文件 该文件存在于所有 3 个节点上 并且包含 2 列 row id c row1 k1 c1 row2 k1 c2 row3 k1

  • 具有 DataBinding 的 RecyclerView 通用适配器

    我使用 DataBinding 为 RecyclerView 创建了通用适配器 这是小代码片段 public class RecyclerAdapter

  • 如何禁用 Jupyter Notebook(Tab) 中的自动完成功能

    I typed Summary outside the cell and change the config of Jupyter notebook When I press Tab the autocomplete menu pop ou

  • 如何根据点计算角度？

    我想要一个简单的解决方案来计算一条线的角度 就像时钟的指针 我有2点 cX cY the center of the line eX eY the end of the line The result is angle 0 lt a lt

  • 字典作为线程安全变量

    我有一个类 单例 它包含一个静态字典 private static Dictionary

  • 使用 Web 套接字在浏览器中创建图形

    我正在尝试寻找可以在网络浏览器中创建条形图的示例或工具 我将通过网络套接字从服务器发送数据 当接收到数据时 我希望每个条形的 高度 发生变化 以反映接收到的数据 因此 用户可以看到图表随着数据的接收而变化 我见过很多例子 但我看不到一个能够

热门标签