V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
lzyong2019
V2EX  ›  JavaScript

求前端高频数据绘图库

  •  
  •   lzyong2019 · 15 小时 13 分钟前 · 755 次点击

    背景

    我正在开发一个上位机的工具,是用 tcp 进行连接的。连接完了之后我会接收到数据,格式如下:

    demo:>1,2,3
    demo:>5,6,7
    
    

    我需要对上面的数据进行解析组成每个通道的数据(通道由每一列元素),如上所示就是有 3 个通道[1,5], [2,6], [3,7]。 然后需要实时的绘图,最大的问题是,这个连接数返回的数据很大约 1s 有 1w 行的数据量。我要怎么进行一个比较好的数据绘图呢。

    7 条回复    2025-03-19 05:20:12 +08:00
    liuhuihao
        1
    liuhuihao  
       14 小时 52 分钟前
    具体是要绘制成什么样子呢?三个柱状图,每个柱状图表示每个通道数据的数据和? 6 ,8 ,10 这样?
    crysislinux
        2
    crysislinux  
       14 小时 49 分钟前 via Android
    你需要先找一个合适的采样算法,屏幕上肯定不可能全部去画的
    UnluckyNinja
        3
    UnluckyNinja  
       13 小时 16 分钟前 via Android
    数据正常更新,绘图时 raf debounce 就行了,高频低频对接基本都是这个策略
    fenglayting
        4
    fenglayting  
       9 小时 29 分钟前
    使用 canvas 绘制图片,每次重新绘制图片,使用 webworker 加 WebSocket 推送,数据比较大需要后端压缩,前端解压;一秒一次很慢了。。
    3085570450tt
        5
    3085570450tt  
       9 小时 2 分钟前
    mayli
        6
    mayli  
       2 小时 21 分钟前
    这个连接数返回的数据很大约 1s 有 1w 行的数据量

    这个 1w 行是每行刷新绘制一次?那 1w fps 哪个库也做不到。
    普通显示 30-60fps 就够了,你肯定要重采样,比如把 min max last avg 质量的算一下,然后 60fps 随便找个库就能做.
    mayli
        7
    mayli  
       2 小时 20 分钟前
    顺便推荐个库:Dear ImGui
    应该性能是够的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1373 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 19ms · UTC 23:40 · PVG 07:40 · LAX 16:40 · JFK 19:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.