在数据刷新后保留最后的Flot十字准线和图例数据

Preseve last Flot crosshair line and legend data after data refresh

本文关键字：数据 十字 刷新 保留 最后的 Flot      更新时间：2023-09-26

编辑:

在miro指出我更新情节的一个缺陷后，我回去重写了这个例子。现在我的准星在数据刷新后保持活跃，不像以前那样好，但我的图例中的"y"值根本无法更新。在这个更新的代码中需要做什么来使"y"值反映十字准星的当前位置?

jsfiddle: http://jsfiddle.net/U9ryR/2/

<html>
<head>
    <script type="text/javascript">
        var highPoint=0;
        var highCount=0;
        $(function() {
            function getPoints() {
                var dataPoints = [];
                for (var i=0; i<=100; i++) {
                    if (i == highPoint && highCount < 20) {
                        dataPoints[i]=[i,8];
                        highCount++;
                    } else {
                        var randomnumber=Math.floor(Math.random()*2);
                        dataPoints[i]=[i,randomnumber];
                    }
                    if (highCount == 20) { highCount = 0; }
                }
                if (highPoint == 100) { highPoint=0; }
                if (highCount == 19) { highPoint++; }
                return dataPoints;
            }    
            var plot = $.plot("#placeholder",
                    [{ data: getPoints(highPoint,highCount),         
                        label: "y = 0"}], {
                            series: {
                                lines: { show: true }
                            },
                       crosshair: { mode: "x" },
                       grid: { hoverable: true, autoHighlight: false },
                       yaxis: { min: 0, max: 10 }
            });
            var legends = $("#placeholder .legendLabel");
            legends.each(function () {
                $(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)));
                }
            }
            function update() {
                $("h1").text(highPoint);
                $("h2").text(highCount);
                plot.setData([getPoints()]);
                plot.draw();
                $("#placeholder").bind("plothover",  function (event, pos, item) {
                    latestPosition = pos;
                    if (!updateLegendTimeout)
                        updateLegendTimeout = setTimeout(updateLegend, 50);
                });
                setTimeout(update, 100);
            }
            update();
        });
    </script>
</head>
<body>
<h1></h1>
<h2></h2>
<div id="placeholder" style="width:500px;height:300px;"></div>
</body>
</html>

你更新错了。

每次都要重画整个图。

初始化一次图形，然后更新数据。

这些是你需要使用的函数。

plot.setData(...);
plot.draw();

检查这个http://www.flotcharts.org/flot/examples/realtime/index.html

查看源代码并检查它是如何工作的，您将设置

相关文章：