Как добавить перекрестье в FLOT после масштабирования графика?

Привет, я создаю график с FLOT, и я добавляю опцию «crosshair», он работает очень хорошо, пока я не увеличиваю график. Я знаю, что проблема связана с привязкой данных «plotselected» с функцией «updatelegend», но я не знаю, как это сделать. Я бы очень признателен, если вы можете мне помочь. Благодарю. Вот мой код:Как добавить перекрестье в FLOT после масштабирования графика?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Tendencia de Produccion</title> 
    <link href="layout.css" rel="stylesheet" type="text/css"> 
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]--> 
    <script language="javascript" type="text/javascript" src="../jquery.js"></script> 
    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> 
    <script language="javascript" type="text/javascript" src="../jquery.flot.crosshair.js"></script> 
    <script language="javascript" type="text/javascript" src="../jquery.flot.selection.js"></script> 
</head> 
    <body> 
    <h1>TENDENCIA DE PRODUCCION</h1> 

<div id="placeholder" style="width:1000px;height:350px; font-size: 13px;"></div> 
<p id="hoverdata"></p> 

Previsualizacion: 
    <div id="overview" style="margin-left:50px;margin-top:20px;width:400px;height:50px"></div> 

<script id="source"> 
$(function() { 
    var d = [[1070233200000, 375.97], [1072911600000, 377.03], [1199142000000, 385.44]]; 


    var options = { 
    series: {lines: { show: true, lineWidth: 1 }}, 
     xaxis: { mode: "time", tickLength: 5 }, 
     selection: { mode: "x" }, 
     grid: { markings: weekendAreas, color: "#333", hoverable: true, autoHighlight: true }, 
    crosshair: { mode: "x" } 
    }; 

    var plot = $.plot($("#placeholder"), [{data:d, label: "Presion = -0.00", color: "#00ff00"} ], options); 


// ************** MOSTRAR PUNTOS AL POSICIONARSE SOBRE LA LINEA DEL GRAFICO ******************************************************** 
    var legends = $("#placeholder .legendLabel"); 
    legends.each(function() { 
     // fix the widths so they don't jump around 
     $(this).css('width', $(this).width()); 
    }); 

    var updateLegendTimeout = null; 
    var latestPosition = null; 

    function updateLegend() { 
     updateLegendTimeout = null; 

     var pos = latestPosition; 

     var axes = plot.getAxes(); 
     if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max || 
      pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) 
      return; 


     var i, j, dataset = plot.getData(); 
     for (i = 0; i < dataset.length; ++i) { 
      var series = dataset[i]; 

      // find the nearest points, x-wise 
      for (j = 0; j < series.data.length; ++j) 
       if (series.data[j][0] > pos.x) 
        break; 

      // now interpolate 
      var y, p1 = series.data[j - 1], p2 = series.data[j]; 
      if (p1 == null) 
       y = p2[1]; 
      else if (p2 == null) 
       y = p1[1]; 
      else 
       y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0])/(p2[0] - p1[0]); 

      legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2))); 

     } 
    } 

// ************************************************************************************************************ 

    $("#placeholder").bind("plothover", function (event, pos, item) { 
     latestPosition = pos; 
     if (!updateLegendTimeout) 
      updateLegendTimeout = setTimeout(updateLegend, 50); 
    }); 


    var overview = $.plot($("#overview"), [{data:d, color: "#00ff00"}], { 
     series: { 
      lines: { show: true, lineWidth: 1 }, 
      shadowSize: 0 
     }, 
     xaxis: { ticks: [], mode: "time" }, 
     yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 }, 
     selection: { mode: "x" } 
    }); 

    // now connect the two 

    $("#placeholder").bind("plotselected", function (event, ranges) { 
     // do the zooming 
     plot = $.plot($("#placeholder"), [{data:d, label: "Presion = -0.00", color: "#00ff00"}], 
         $.extend(true, {}, options, { 
          xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to } 
         })); 

     // don't fire event on the overview to prevent eternal loop 
     overview.setSelection(ranges, true); 
    }); 



    $("#overview").bind("plotselected", function (event, ranges) { 
     plot.setSelection(ranges); 
    }); 




}); 
</script> 

</body> 
</html>

источник

2012-01-23 Daniel Alexander Pernia Marque

После увеличения масштаба, похоже, код теряет это обращение к переменной «легенде». Вероятно, это потому, что сюжет перерисовывается. Просто повторите запрос в обратном вызове легенды обновления:

var legends = $("#placeholder .legendLabel"); 
legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));

источник

2012-01-24 00:00:24 Mark

Как добавить перекрестье в FLOT после масштабирования графика?

ответ

Смежные вопросы