通过更改绘图数据更新flot图

时间:2014-01-02 15:24:29

标签: javascript jquery html flot

我想通过更改系列中的一个值来更新flot图,并且还应根据更改的值更新相应的图。我的x轴是日期和时间,我的y轴是计数。

Sample image

在上面的图片中,它解释了我到底想要什么。

function fnUpdateGraph(isNew,isUndo,isRedo){
 if(selectednodeid==undefined){
  showdialog(message.information,messages.informatio,"No nodes selected",null,false);
  return false;
 }
 var newHeadDate=new Date();
 var updateDate=document.getElementById("txt_node_head_date").value.split("-",3);
 newHeadDate.setDate(updateDate[0]);
 newHeadDate.setDate(+updateDate[1]-1);
 newHeadDate.setDate(updateDate[2]);
 var updateTime=document.getElementById("txt_node_head_time").value.split(":",2);
 newHeadDate.setHours(updateTime[0],updatetime[1],0,0);
 var maxNodeId=vehicle[selectedvehicle].length;
 if(selectedNodeId<maxNodeID){
  if(newHeadDate.getTime()>=new Date(vehicle[selectedvehicle][selectedNodeId+1].headDate).getTime()){
   plot.setData();
   plot.setupGrid();
   plot.draw();
   return;
  }
 }

我添加了部分代码,我已经定义了updateGraph函数。为了使图表以更改的值绘制,需要进行哪些更改。

1 个答案:

答案 0 :(得分:4)

您需要结合使用plot.getDataplot.setData(请参阅文档here)。 getData将返回一个系列数组,循环显示这些数组,直到找到感兴趣的点并修改该值。然后拨打setDatasetupGriddraw

var someData = somePlot.getData();
// loop first series
for (var i = 0; i < someData[0].data.length; i++) {
  // the data member of the series contains x/y point data
  // look at X values until you find the one you want
  if (someData[0].data[i][0] == someSearchXValue) {
     someData[0].data[i][2] = someNewYValue;
     plot.setData(someData);
     plot.setupGrid();
     plot.draw();
     return;
  }
}

这是fiddle demonstration