Question

我正在研究Flot-动态数据和多轴图。如果数据与Y2轴绑定存在问题，我可以将数据绑定到图形（如果它是静态图形）但是当我尝试使用动态数据进行绑定时，数据总是绑定到默认的y轴只有第二个y轴没有反射任何东西。请adivse，如何解决这个问题。以下是我的代码。

<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>

Answer 1

当您第一次调用flot时，您使用的是以下数据：

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

在getData函数中，您生成的数据只是数组，没有标签，没有yaxis值。这将覆盖您为第二个数据阵列指定的内容。相反，在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/

将动态数据绑定到多轴Flot Graph

1 个答案: