基于LightningChart构建多速率实时数据监控器遇时序问题求助

核心解决思路 #

针对每3秒推送6秒批量数据的场景，要实现指定速率（500/70/50点/秒）的平稳动画，核心是拆分批量数据为符合速率要求的小段，结合高精度计时逐段渲染，而不是一次性加载所有数据。

具体实现步骤 #

1. 批量数据拆分 #

根据目标速率，将6秒的原始数据拆分为适配屏幕帧率的小数据块：

// 按目标速率拆分批量数据
function splitBatchData(rawData, pointsPerSecond) {
    const frameRate = 60
    const pointsPerFrame = pointsPerSecond / frameRate
    const chunks = []
    let currentIdx = 0
    while (currentIdx < rawData.length) {
        const takeCount = Math.ceil(pointsPerFrame)
        chunks.push(rawData.slice(currentIdx, currentIdx + takeCount))
        currentIdx += takeCount
    }
    return chunks
}

2. 高精度计时渲染 #

使用performance.now()替代普通定时器，确保渲染间隔严格匹配目标速率，避免受屏幕刷新率干扰：

// 按指定速率渲染数据块
function renderByRate(chunks, pointsPerSecond, series) {
    const pointInterval = 1000 / pointsPerSecond
    let chunkIdx = 0
    let pointInChunkIdx = 0
    let lastRenderTime = performance.now()

    const renderLoop = () => {
        const now = performance.now()
        // 计算这段时间内应该渲染的点数
        const pointsToRender = Math.floor((now - lastRenderTime) / pointInterval)
        
        for (let i = 0; i < pointsToRender && chunkIdx < chunks.length; i++) {
            if (pointInChunkIdx >= chunks[chunkIdx].length) {
                chunkIdx++
                pointInChunkIdx = 0
                if (chunkIdx >= chunks.length) break
            }
            const point = chunks[chunkIdx][pointInChunkIdx]
            series.add(point.x, point.y)
            pointInChunkIdx++
        }

        lastRenderTime = now
        if (chunkIdx < chunks.length) requestAnimationFrame(renderLoop)
    }

    requestAnimationFrame(renderLoop)
}

3. 多图表独立管控 #

为每个不同速率的图表创建独立的渲染管理器，避免相互干扰：

class StreamChartManager {
    constructor(chart, series, pointsPerSecond) {
        this.chart = chart
        this.series = series
        this.pointsPerSecond = pointsPerSecond
        this.renderQueue = []
        this.isRendering = false
    }

    // 接收批量数据并加入渲染队列
    pushBatchData(rawData) {
        const dataChunks = splitBatchData(rawData, this.pointsPerSecond)
        this.renderQueue.push(...dataChunks)
        if (!this.isRendering) this.startRender()
    }

    // 启动渲染循环
    startRender() {
        this.isRendering = true
        const pointInterval = 1000 / this.pointsPerSecond
        let chunkIdx = 0
        let pointInChunkIdx = 0
        let lastRenderTime = performance.now()

        const renderLoop = () => {
            const now = performance.now()
            const pointsToRender = Math.floor((now - lastRenderTime) / pointInterval)
            
            for (let i = 0; i < pointsToRender && chunkIdx < this.renderQueue.length; i++) {
                if (pointInChunkIdx >= this.renderQueue[chunkIdx].length) {
                    chunkIdx++
                    pointInChunkIdx = 0
                    if (chunkIdx >= this.renderQueue.length) break
                }
                const p = this.renderQueue[chunkIdx][pointInChunkIdx]
                this.series.add(p.x, p.y)
                pointInChunkIdx++
            }

            // 更新坐标轴滚动（保持最近10秒数据可见）
            const latestX = this.renderQueue[chunkIdx]?.[pointInChunkIdx - 1]?.x || 0
            this.chart.getDefaultAxisX().setInterval(Math.max(0, latestX - 10), latestX)

            lastRenderTime = now
            if (chunkIdx < this.renderQueue.length) {
                requestAnimationFrame(renderLoop)
            } else {
                this.isRendering = false
                this.renderQueue = []
                chunkIdx = 0
                pointInChunkIdx = 0
            }
        }
        requestAnimationFrame(renderLoop)
    }
}

4. 初始化与使用示例 #

// 初始化500点/秒的图表
const chart500 = lightningChart().ChartXY()
const series500 = chart500.addLineSeries()
const manager500 = new StreamChartManager(chart500, series500, 500)

// 初始化70点/秒的图表
const chart70 = lightningChart().ChartXY()
const series70 = chart70.addLineSeries()
const manager70 = new StreamChartManager(chart70, series70, 70)

// 收到后端推送的数据时调用
function onDataPush(rawData, targetRate) {
    switch (targetRate) {
        case 500: manager500.pushBatchData(rawData); break
        case 70: manager70.pushBatchData(rawData); break
        case 50: manager50.pushBatchData(rawData); break
    }
}

关键优化点 #

• 禁用LightningChart默认的自动数据聚合，确保每个点都按指定速率渲染
• 每帧渲染多个点而非单个点，减少requestAnimationFrame调用开销
• 手动控制X轴滚动范围，避免自动滚动导致的时序错位

内容的提问来源于stack exchange，提问作者tom672