Question

目前，我有一个支持＆＃34;可锁定＆＃34;点。我注册了一个plotclick事件，突出显示该点，并显示我提供"lockedPoint" + item.dataindex id的工具提示。我还有一个使用jquery.flot.selection.js的缩放功能。通过使用它，我修改我的x和y轴最大值和最小值，并重新绘制我的数据（基本上丢弃旧数据）。我正在努力保护＆＃34;锁定点＆＃34;缩放时。

我想到的一个解决方案是在收集数据时，我可以专门将该点推到系列中的正确位置，如果它在缩放范围内，则突出显示该点。但是，这似乎没有正常工作。

我存储关于＆＃34;锁定点的数据＆＃34;在一个像这样初始化的关联数组中。

for (var i = 1; i < 5; i++){
   lockedPoints["Series " + i] = [];
}

然后我允许最多三个项目被推到每个阵列上（每个系列最多三个可锁定点）。我会用新突出显示的点替换数组中的点（我相信唯一会改变的是dataindex）。通过在收集数据时将它们推入数据系列，我是否有可能使点在变焦中存活？

function gatherData(kElement, a0Element){
//PRE:   kElement is the id of the element containing the rate constant, and a0Element is the id of the element
//          containing the molarity
//POST:  FCTVAL is a data series in the format of {data: data, lines: {show: true}, color: "color", label: "label"}
   var xData = [];                                       //x-coordinates
   var yData = [];                                       //y-coordinates
   var data = [];                                        //array of coordinate pairs
   var startingPoint;                                    //least x-value to graph
   var finishingPoint;                                   //greatest x-value to graph
   var range;                                            //range of x-values
   var interval;                                         //value to evenly space x-values for calculations
   var current;                                          //current value of x-coordinate for which we are 
                                                         //    calculating a y-value
   var labelParent;                                      //parent node of x-axis labels
   var k;                                                //rate constant value
   var molarValue;                                       //molarity value
   var result;                                           //result of the rate equation

   numXPoints = 1001;

   if (document.getElementById("logCheck").value == "On"){      //graph logarithmically
      logarithmic = true;
   }
   else{                                                          //graph decay
      logarithmic = false;
   }

   if (document.getElementById("blackWhite").value == "On"){
      blackWhite = true;
   }
   else{
      blackWhite = false;
   }

   k = document.getElementById(kElement).value;
   molarValue = document.getElementById(a0Element).value;

   startingPoint = minX;                                             //we will say time starts at 0 always for this plot
   finishingPoint = maxX;

   range = finishingPoint - startingPoint;                        //calculated range for determining points to plot
   interval = range / numXPoints;                                 //we will graph numXPoints points
   current = startingPoint;                           

   result = molarValue * Math.pow(Math.E, (-k * current));
   if (logarithmic){                                              //for logarithmic calculations
      result = Math.log(result);
   }
   if (result > maxValue){                                        //store largest y-value                         
      maxValue = result;
   }

   for (var i = 0; i < numXPoints; i++){                        //store x-values and calculated y-values
                                                                  //    and find max y-value
      xData[i] = current;
      yData[i] = result;
      current += interval;
      result = molarValue * Math.pow(Math.E, (-k * current));

      if (logarithmic){                                           //for logarithmic calculations
         result = Math.log(result);
      }

      if (yData[i] > maxValue){                                   //store largest y-value
         maxValue = yData[i];
      }
      if (yData[i] < minValue && minValue > -400){                //store smallest y-value
         minValue = yData[i];
      }
   }

   for (var i = 0; i < numXPoints; i++){                        //combine coordinates into one series
      data[i] = [xData[i], yData[i]];
   }

   //modified jquery.flot.js to support dashed line hover.
   //values modified were pointRadius and radius in the drawPointHighlight method.
   if (blackWhite == true){
      switch(kElement){
         case "kValue1":
         return {points:{show: true, radius: 0}, data: data, lines:{show: true}, color: "black", label: "Series 1", shadowSize: 0};
         break;
      case "kValue2":
         return {points:{show: true, radius: 0}, data: data, dashes:{show: true, dashLength: 2}, color: "black", label: "Series 2", shadowSize: 0};
         break;
      case "kValue3":
         return {points:{show: true, radius: 0}, data: data, dashes:{show: true, dashLength: 10}, color: "black", label: "Series 3", shadowSize: 0};
         break;
      case "kValue4":
         return {points:{show: true, radius: 0}, data: data, dashes:{show: true, dashLength: 20}, color: "black", label: "Series 4", shadowSize: 0};
         break;
      }
   }
   else{
      switch (kElement){                                             //return proper object to match flot graph description
         case "kValue1":
            return {points:{show: false, radius: 0}, data: data, lines:{show: true}, color: "red", label: "Series 1"};
            break;
         case "kValue2":
            return {points:{show: false, radius: 0}, data: data, lines:{show: true}, color: "blue", label: "Series 2"};
            break;
         case "kValue3":
            return {points:{show: false, radius: 0}, data: data, lines:{show: true}, color: "green", label: "Series 3"};
            break;
         case "kValue4":
            return {points:{show: false, radius: 0}, data: data, lines:{show: true}, color: "gold", label: "Series 4"};
            break;
      }
   }
}

我可以找到一种处理工具提示删除的方法，但突出显示同一点是最简单的部分。

enter image description here

Answer 1

如果您使用setupGrid和draw的组合，重绘将在重绘之间保持不变，您不需要手动重新应用（就像您重新初始化一样）。

此外，要在重新绘制之间操作数据（例如缩放选择），请使用getData和setData的组合：

$("#flot_chart").bind("plotselected", function (event, ranges) {
    var fr = ranges.xaxis.from;
    var to = ranges.xaxis.to;
    $.each(plot.getXAxes(), function(_, axis) {
        var opts = axis.options;
        opts.min = fr;
        opts.max = to
    });
    //pad data points, so the hover effect doesn't look spotty
    var series = plot.getData(); // get series
    series[0].data = []; // clear it out
    for (var i = fr; i < to; i+=(to-fr)/100){
        series[0].data.push([i,Math.sin(i)]); // push in data with a suitable increment to i
    }
    plot.setData(series); // set the new data  
    plot.setupGrid(); // redo the grid
    plot.draw(); // redraw the plot
    plot.clearSelection();
});

这是一个小提琴example。

使用flot进行regraph后，如何使突出显示点保持不变？

1 个答案: