1

私はFlot動的データと多軸グラフに取り組んでいます。Y2 軸とのデータのバインドに問題があり、静的グラフの場合はデータをグラフにバインドできますが、何らかの理由で動的データとバインドしようとすると、データは常にデフォルトの y 軸にバインドされますのみ、2 番目の y 軸は何も反映していません。この問題を解決する方法を教えてください。以下は私のコードです。

<div id="placeholder" style="width:600px;height:300px;"></div> 

<script type="text/javascript"> 

var xVal = 0; 

var inputdata = [[], []]; 

var options = { xaxes: [{}], 
yaxes: [{}, { show: 

true, position: "right"}] 
}


var plot = $.plot($("#placeholder"), [{ data: inputdata[0], label: "series 1" }, { data: inputdata[1], label: "series 2", yaxis: 2}], options); 


function getData() { 

// This could be an ajax call back. 

var yVal1 = Math.floor(Math.random() * 11); 

var yVal2 = Math.floor(Math.random() * 11); 

var datum1 = [xVal, yVal1]; 

var datum2 = [xVal, yVal2]; 
inputdata[0].push(datum1);

inputdata[1].push(datum2);


if (inputdata[0].length > 10) { 
inputdata[0] = inputdata[0].splice(1);

inputdata[1] = inputdata[1].splice(1);

}

xVal++;


//alert("inputdata :" + inputdata); 
plot.setData(inputdata);

plot.setupGrid();

plot.draw();


//alert("plot.getAxes() " + plot.getAx ); 
}

setInterval(getData, 1000);

</script>
4

1 に答える 1

2

flot を初めて呼び出すときは、次のデータを使用しています。

[{ data: inputdata[0], label: "series 1" }, 
 { data: inputdata[1], label: "series 2", yaxis: 2}
]

getData関数では、ラベルや yaxis 値のない単なる配列のデータを生成します。これにより、2 番目のデータ配列に指定したものが上書きされます。代わりに、getData関数内でシリーズ オブジェクト全体を再現します。

function getData() {
   //your code here

   plot.setData(    [{ data: inputdata[0], label: "series 1" }, 
                     { data: inputdata[1], label: "series 2", yaxis: 2}
                    ] 
   );
   plot.setupGrid();
   plot.draw();
}

ここでの実例: http://jsfiddle.net/ryleyb/hqeGg/

于 2012-12-17T16:57:46.040 に答える