Question

你好我正在用FLOT创建一个图形，我正在添加“十字准线”选项，它在我缩放图形之前效果很好。我知道问题是当我用“updatelegend”函数绑定“plotselected”数据时，但我不知道该怎么做。如果你能帮助我，我会非常感激。谢谢。这是我的代码：

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

Answer 1

缩放后，看起来代码正在丢失它对变量“legends”的引用。这可能是因为正在重绘图。只需在更新图例回调中重新查询它：

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

如何在缩放图形后在FLOT中添加十字准线？

1 个答案: