文章/答案/技术大牛

发布

社区首页 >问答首页 >Javascript实际上:5个图中只有2个在更新

问Javascript实际上:5个图中只有2个在更新
EN

Stack Overflow用户

提问于 2022-07-14 09:20:07

回答 1查看 40关注 0票数 1

我对Javascript很陌生，如果这是学生的错误，我很抱歉。

我有一个网页要求从蓝牙低能设备(Arduino Nano BLE 33感觉)浮动5，这是收到的。然后继续解析浮点数，更新5个数据数组并调用Plotly.react。对浮点数进行正确的分析，并更新缓冲区(在console.log上验证)。我在布局信息中增加了datarevision属性(这适用于所有5个图)，但只有图1和3被更新。

浏览器是Chrome (用于BLE支持)，以防造成影响。URL是本地file:///路径。有人能告诉我我做错了什么吗？

杰森

HTML (现在编辑以删除任何BLE交互)：

<!DOCTYPE html>
<html>
<head>
  <title>Temperature monitor</title>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>

    <button id="connectBtn">Connect</button>
    <div id="temp0"></div>
    <div id="temp1"></div>
    <div id="temp2"></div>
    <div id="temp3"></div>
    <div id="temp4"></div>
    <div id="temp5"></div>

    <script>

const connectBtn = document.getElementById("connectBtn");

const MAX_BUFFER_LENGTH = 64;

const temp1 = [];
const temp2 = [];
const temp3 = [];
const temp4 = [];
const temp5 = [];

var temp1Data =
{
    y: temp1,
    mode: "lines",
    type: "scatter",
    name: "Temp",
    width: 1,
    line: {width: 1}
};

var temp2Data =
[{
    y: temp2,
    mode: "lines",
    type: "scatter",
    name: "Temp",
    width: 1,
    line: {width: 1}
}];

var temp3Data =
{
    y: temp3,
    mode: "lines",
    type: "scatter",
    name: "Temp",
    width: 1,
    line: {width: 1}
};

var temp4Data =
[{
    y: temp4,
    mode: "lines",
    type: "scatter",
    name: "Temp",
    width: 1,
    line: {width: 1}
}];

var temp5Data =
[{
    y: temp5,
    mode: "lines",
    type: "scatter",
    name: "Temp",
    width: 1,
    line: {width: 1}
}];

var allTempLayout =
{
    plot_bgcolor: '#111111',
    paper_bgcolor: '#111111',
    margin: {l:8,r:8,b:18,t:18},
    showlegend: false,
    datarevision: 0,
    yaxis:
    {
        'range': [0,120],
        'showticklabels':false
    },
    xaxis:
    {
        'range': [0,64],
        'showticklabels':false,
        'autorange': false,
        'showgrid': true,
        'zeroline': true,
        tickfont: {size: 8}
    }
}

async function connectSensors()
{
    setInterval(function() {
        if(temp1.length === MAX_BUFFER_LENGTH)
        {
            temp1.shift();
            temp2.shift();
            temp3.shift();
            temp4.shift();
            temp5.shift();
        }
        temp1.push(Math.random() * 100.0);
        temp2.push(Math.random() * 100.0);
        temp3.push(Math.random() * 100.0);
        temp4.push(Math.random() * 100.0);
        temp5.push(Math.random() * 100.0);

        allTempLayout.datarevision++;
        console.log("Plot " + allTempLayout.datarevision);

        Plotly.react("temp1", [temp1Data], allTempLayout);
        Plotly.react("temp2", [temp2Data], allTempLayout);
        Plotly.react("temp3", [temp3Data], allTempLayout);
        Plotly.react("temp4", [temp4Data], allTempLayout);
        Plotly.react("temp5", [temp5Data], allTempLayout);
    }, 1000);
}

connectBtn.addEventListener ( "click", async () => {
    try { connectSensors(); }
    catch (err) {
        console.log(err);
        alert("An error occured while fetching device details");
    }
});

Plotly.newPlot("temp1", [temp1Data], allTempLayout);
Plotly.newPlot("temp2", [temp2Data], allTempLayout);
Plotly.newPlot("temp3", [temp3Data], allTempLayout);
Plotly.newPlot("temp4", [temp4Data], allTempLayout);
Plotly.newPlot("temp5", [temp5Data], allTempLayout);

    </script>

</body>
</html>

plotly.js

javascript

plotly

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-07-15 06:50:07

查看您的代码，您将var temp1Data = {...}声明为一个对象，而将var temp2Data = [...]声明为一个数组。看起来，将类型更改为object应该可以解决问题。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72978135

复制

相似问题

问Javascript实际上:5个图中只有2个在更新
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript实际上:5个图中只有2个在更新EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript实际上:5个图中只有2个在更新
EN