我怎么能重新用于显示有关突出显示点的信息上的海军报图放大后的提示?(How can I reposi

2019-10-20 13:03发布

目前,我有使用海军报plotclick事件和由该事件所创建的项目创建可锁定点的系统。 余的每个项目存储在像这样初始化一个数组:

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

图表支持每个系列三个锁定点。 我使用jquery.flot.selection.js作为变焦功能正常工作。 变焦时使可见点的数量是无限的我修改数据。

这是用于确定数据点绘制图形的函数:

function createData(kElement, a0Element){
   var data = [];
   var k;
   var a0;
   var result;

   k = kElement.value;
   a0 = a0Element.value;

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

   for (var i = minX; i <= maxX; i += (maxX - minX) / 1000){
      result = a0 * Math.pow(Math.E, (-k * i));

      if (logarithmic){
         result = Math.log(result);
         data.push([i, result]);
      }
      else{
         data.push([i, result]);
      }

      if (result > maxValue){
         maxValue = result;
      }

      if (result < minValue && result > -400){
         minValue = result;
      }
   }

   return data;
}

我用这个功能来执行变焦效果:

$(this).bind("plotselected", function(event, ranges){
  if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) {
     ranges.xaxis.to = ranges.xaxis.from + 0.00001;
  }

  if (ranges.yaxis.to - ranges.yaxis.from < 0.00001) {
     ranges.yaxis.to = ranges.yaxis.from + 0.00001;
  }

  minX = ranges.xaxis.from;
  maxX = ranges.xaxis.to;

  dataSets = [];
  dataSets = chart.getData();

  var count = 0;

  for (var i = 0; i < 4; i++){
     var k = document.getElementById("kValue" + (i + 1));
     var a0 = document.getElementById("a0Value" + (i + 1));
     var onOff = document.getElementById("switch" + (i + 1));

     if (onOff.name == "on"){
        dataSets[count].data.push(createData(k, a0));
        count++;
     }
  }

  if (ranges.yaxis.from > ranges.yaxis.to){
     maxValue = ranges.yaxis.from;
     minValue = ranges.yaxis.to;
  }
  else{
     maxValue = ranges.yaxis.to;
     minValue = ranges.yaxis.from;
  }

  options = chart.getOptions();
  options.xaxes[0].min = minX;
  options.xaxes[0].max = maxX;
  options.yaxes[0].min = minValue;
  options.yaxes[0].max = maxValue;


  if ($("#xAxisLabel").html() == "time (hours)"){                 //adjust tickFormatter for different labels
     options.xaxis.tickFormatter = function (value) {
        return (value / 3600).toFixed(2);
     };
  }
  else if ($("#xAxisLabel").html() == "time (minutes)"){
     options.xaxis.tickFormatter = function (value) {
        return (value / 60).toFixed(2);
     };
  }
  else{
     options.xaxis.tickFormatter = function (value) {
        return (value).toFixed(2);
     };
  }

  chart.setData(dataSets);
  chart.setupGrid();
  chart.draw();
  chart.clearSelection(true);
  relocateLockedTips();             //not functional. Goal is to make a function that can move tooltips accordingly
});

我提示追加到文档体的ID "lockedPoint" + item.dataIndex ,我允许用户如果plotclick事件符合这些资格删除锁定点:

我检查我的所有值达到锁定点的每个系列的金额。

Math.abs(lockedPoints[item.series.label][i].pageX - item.pageX) < 10
    && Math.abs(lockedPoints[item.series.label][i].pageY - item.pageY) < 10

有没有办法,我可以缩放后更新我lockedPoints的阵列的方式,这样我就可以重新使用pageX属性和pageY我的提示? 该pageX属性和pageY都改变,当我重新绘制的情节,所以我想知道是否有某种方法来确定一个点被突出显示(这将让我“重新锁定”了点,存储新的pageX属性和新pageY)。 我看着jquery.flot.js代码,我看到它们存储在高亮一个数组变量,但存储的亮点不是由plotclick事件返回同一类型的对象。

缩放之前:

变焦后:

请注意提示变焦后如何保持在原位。

在这个问题上的任何帮助,将不胜感激。 谢谢!

Answer 1:

你可以这样做:

function relocateLockedTips(dataSets) {

    // get coordinates from graph, replace "graph" with your id
    var graphX = $('#graph').offset().left;
    var graphY = $('#graph').offset().top;

    // loop over all data series
    for (var i = 0; i < lockedPoints.length; i++) {

        // loop over locked points for this series
        for (var j = lockedPoints[i].length -1; j >= 0; j--) {
            var point = lockedPoints[i][j];

            // if point is out of zoom range, remove it
            if (point.datapoint[0] < minX ||
                point.datapoint[0] > maxX ||
                point.datapoint[1] < minValue ||
                point.datapoint[1] > maxValue) {

                $('#lockedPoint' + point.dataIndex).remove();
                lockedPoints[i].splice(j);
            }
            else {
                // move tooltip to new coordinates
                var newCoords = {
                    left: graphX + dataSets[i].xaxis.p2c(point.datapoint[0]),
                    top:  graphY + dataSets[i].yaxis.p2c(point.datapoint[1])
                };
                $('#lockedPoint' + point.dataIndex).offset(newCoords);
            }
        }
    }
}

PS:如果没有提示标识还包括seriesIndex ? 因为它是现在从另一系列具有相同的一点提示dataIndex可以覆盖现有的提示。



文章来源: How can I reposition tooltips used to display information about highlighted points after zooming in on a flot graph?