Question

请您告诉我我做错了什么吗？我正试图一次绘制出y1和y2。我从http://vmzakova.fei.stuba.sk/sse/sse.php获取数据，将其另存为对象。对于一个y，它没有任何痕迹，Im仅对一个y轴使用一个数组，但是当我尝试将其用于2 y轴时，它不起作用。

{

var obj;
var trace1;
var trace2;
var pole = [];
var data = [];
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("http://vmzakova.fei.stuba.sk/sse/sse.php");
    source.onmessage = function(event) {
        document.getElementById("result").innerHTML += event.data + "<br>";
        var obj = JSON.parse(event.data);
        //pole.push(obj.y1,obj.y2);
     trace1 = {
        y: obj.y1,
        name: "yaxis data",
        type: "scatter"
        };  
     trace2 = {
        y: obj.y2,
        name: "yaxis2 data",
        type: "scatter"
        };  
        data = [trace1,trace2];
    };
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}

//console.log(pole1);
//console.log(pole2);

console.log(pole);
function getData() {
                //return pole1;
            }  /*
            Plotly.plot('chart',[{
                y:[0],
                type:'line'
            }]);*/

            var layout = {
                title: 'Double Y Axis Example', 
                yaxis: {title: 'yaxis title'}, 
                yaxis2: {
                title: 'yaxis2 title', 
                titlefont: {color: 'rgb(148, 103, 189)'}, 
                tickfont: {color: 'rgb(148, 103, 189)'}, 
                overlaying: 'y', 
                side: 'right'
                }
            };
            Plotly.newPlot('chart', data, layout);
            
            var cnt = 0;
            setInterval(function(){
                //Plotly.extendTraces('chart',{ y:[[pole1[pole1.length-1]]]}, [0]);
                //Plotly.extendTraces('chart',{ y:[[pole[pole.length-2, pole.length-1]]]}, [0]);
                Plotly.extendTraces('chart',{ y:[[data]]}, [0]);
                cnt++;
                if(cnt > 500) {
                    Plotly.relayout('chart',{
                        xaxis: {
                            range: [cnt-500,cnt]
                        }
                    });
                }
            },2000);

<!DOCTYPE html>
<html>
<head>
	<title>graf</title>
	<link rel="stylesheet" type="text/css" href="app.css">
	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
	
</head>
<body>

	<div id="chart"></div>
	<div id="result"></div>
	<div id="result2"></div>

	<script src="myscript.js" ></script>
</body>
</html>

}

如何在plotly.js中使用两个y轴绘制图形

0 个答案: