基于Node.js、Socket.io与Arduino的Plotly可视化出现y轴数值未正确排序问题求助

1. 类型转换引发的排序逻辑错乱 #

• 代码里所有传给Plotly的Y轴数据，都是从DOM节点的innerHTML属性读取的字符串，并非数值类型。
• Plotly处理字符串格式的数值序列时，会按字典序而非数值大小排序计算Y轴刻度，直接导致Y轴排序完全偏离逻辑——比如字符串形式的"100"会被判定为比"99"更小，和Arduino IDE原生绘图的数值排序逻辑完全不匹配。
• 用DOM节点做数据临时中转的设计本身存在缺陷：innerHTML读写的内容永远是字符串类型，哪怕传入的是纯数字，只要经过DOM中转就会被隐式转成字符串，天然存在类型错配风险。

2. 数据更新节奏完全错位 #

• 代码中用固定6ms间隔的setInterval轮询DOM取值、追加绘图点的逻辑，和Socket.io推数据的实际节奏没有做任何同步：
  • Socket推数间隔大于6ms时，同一个旧值会被反复追加到绘图序列里，造成数据堆叠
  • Socket推数间隔小于6ms时，新值还没被轮询到就被下一次推数覆盖，造成数据缺失、时序混乱
• 整个数据流转链路是「Socket收数→写DOM→读DOM取数→绘图」，完全没必要的中转环节放大了时序错位的问题。

3. 初始化逻辑存在缺陷 #

• 页面加载时立即执行的Plotly.plot初始化操作，此时展示数值的DOM节点还是空状态，初始化传入的Y值为空字符串，没有建立正确的数值型坐标系，后续追加数据时也会进一步放大排序错乱的问题。

• 移除DOM作为数据中转的环节，所有采集到的数值直接用JS变量存储流转，不经过DOM读写传递
• 收到Socket数据后强制做数值类型转换，确保传给Plotly的所有Y轴数据都是Number类型，从根源上避免字典序排序的问题
• 把绘图更新的逻辑直接绑定在Socket收数的回调里，不再用独立的setInterval轮询，彻底解决节奏错位的问题
• 初始化Plotly时显式声明Y轴为数值类型，开启自动范围适配，避免坐标系建立异常

修正后的可直接运行代码：

<div id="ivValue"></div>
<div id="ivPlot"></div>

<script>
    var socket = io();
    // 用JS变量直接缓存最新的Arduino采集值，不经过DOM中转
    let latestSensorValue = 0;

    // 初始化Plotly，建立空的数值型坐标系
    Plotly.plot('ivPlot', [{
        y: [],
        type: 'line'
    }], {
        // 强制Y轴按数值逻辑计算刻度，开启自动范围适配
        yaxis: { rangemode: 'tozero' }
    });

    socket.on('data', function(rawData) {
        console.log(rawData);
        // 强制将原始数据转为数值类型，规避字符串带来的排序异常
        latestSensorValue = Number(rawData);
        // 仅在需要页面展示时，把数值写到DOM节点
        document.getElementById('ivValue').innerHTML = latestSensorValue;
        // 收到新数据时直接追加到绘图序列，取消原来的setInterval轮询
        Plotly.extendTraces('ivPlot', { y: [[latestSensorValue]] }, [0])
    });
</script>

优化提示：长周期运行时可以在extendTraces的配置中增加maxpoints参数，控制绘图窗口保留的最大数据点数量，避免长时间运行导致的内存占用过高、绘图卡顿，示例写法：

Plotly.extendTraces('ivPlot', { 
    y: [[latestSensorValue]],
    maxpoints: 1000
}, [0])

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