在javascript中实时流式传输

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
    <body> 
    <div id="myDiv2" style="width: 600px; height: 650px;"><!-- Plotly chart will be drawn inside this DIV --></div> 
    </body> 
    <script> 
    var socket = io(); 
    socket.on('temp', function(temp){ 
     $('#messages').html(temp); 
     var layout = { 
    title: "Live Data Streaming", 
    xaxis: { 
     title: "X Axis", 
     titlefont: { 
     family: "Verdana, Sans-serif", 
     size: 18, 
     color: "#7f7f7f" 
     } 
    }, 
    yaxis: { 
     title: "Live Data", 
     titlefont: { 
     family: "Verdana, Sans-serif", 
     size: 18, 
     color: "#7f7f7f" 
     } 
    } 
    }; 
    var i=0; 
    var loop = setInterval(function() { 
    var trace1 = { 
    x: [i], 
     y: [temp], 
     type: 'line' 
     }; 
     i++; 
    }, 5000); 

     var data = [trace1]; 
     Plotly.newPlot('myDiv2', data, layout); 
    }); 
      </script>

套接字正在侦听变量temp。我希望每五秒钟将这个临时变量生成一个图表。现在，我正在积极使用并每五秒设置一次间隔，但图形不会显示在我的html中。如果我删除setInterval，图表显示正常，但旧的临时替换为新的临时而不是继续图形。任何想法如何在Java脚本中直播这些数据。在javascript中实时流式传输

来源

2016-07-25 jay

var plotDiv = document.getElementById('myDiv2'); 
layout = { 
    hovermode:'closest', 
    title: "Live Data Streaming", 
    xaxis: { 
    title: "X Axis", 
    autorange:true, 
    titlefont: { 
     family: "Verdana, Sans-serif", 
     size: 18, 
     color: "#7f7f7f" 
    } 
    }, 
    yaxis: { 
    title: "Live Data", 
    autorange:true, 
    titlefont: { 
     family: "Verdana, Sans-serif", 
     size: 18, 
     color: "#7f7f7f" 
    } 
    } 
}; 
var data = [{ 
    x: [0], 
    y: [0] 
}]; 

Plotly.plot(plotDiv, data, layout); 

var i = 1; 
setInterval(function(){ 
    socket.once('temp', function(temp){ 
    var update = {x: [[i]],y: [[temp]]}; 
    i++; 
    Plotly.extendTraces(plotDiv, update, [0], 100); 
    }); 

    $('#stop').click(function() { 
    clearInterval(loop); 
    }); 
    }, 5000); 

    plotDiv.on('plotly_click', function(data){ 
    var pts = ''; 
    for(var i=0; i < data.points.length; i++){ 
     pts = 'x = '+data.points[i].x +'\ny = '+ 
     data.points[i].y.toPrecision(4) + '\n\n'; 
    } 
    alert('Data point clicked is located at:\n\n'+pts); 
    });

这应该会直播流数据完美地使用JavaScript。

来源

2016-07-26 13:36:48 jay

参见Plotly.extendTraces：

https://community.plot.ly/t/live-streaming-data-using-javascript/1645/2 https://codepen.io/etpinard/pen/qZzyXp

function rand() { 
    return Math.random(); 
} 

Plotly.plot('graph', [{ 
    y: [1,2,3].map(rand) 
}, { 
    y: [1,2,3].map(rand) 
}]); 

var cnt = 0; 

var interval = setInterval(function() { 

    Plotly.extendTraces('graph', { 
    y: [[rand()], [rand()]] 
    }, [0, 1]) 

    if(cnt === 100) clearInterval(interval); 
}, 300);

来源

2017-07-11 20:53:04 user1561393

在javascript中实时流式传输

回答

相关问题