Question

我有一个应用程序，我将数据存储在数据库中。这需要在网页（jsp页面）上呈现为实时图形。我每秒都使用服务器端事件将数据从数据库发送到客户端页面。在客户端，我使用flot图表来呈现实时图表。

我每秒都正确地从服务器接收数据。但是，flot图表未正确显示。它只显示一条直线上下。这是代码：

   $(function() {
    var serverDataPoints=[];
    var graphDataPoints = [];
    function setupEventSource() {

        if (typeof(EventSource) !== "undefined") {
            var source = new EventSource("serverdataupdater");
             source.onmessage = function(event) {
                 serverDataPoints =[];
                    var arr = jQuery.parseJSON(event.data);
                    $.map( arr, function( value, index ) {
                        serverDataPoints.push(value.serverdata);
                    });
                    var plot = $.plot("#placeholder", serverDataPoints, {
                        series: {
                            shadowSize: 0   // Drawing is faster without shadows
                        },
                        yaxis: {
                            min: -0.5,
                            max: 2.0
                        },
                        xaxis: {
                            show: false
                        }
                    });
                } 
             }else {
            alert("Sorry, Server-Sent Event is not supported in your browser");
        }
         return false;
    }

    setupEventSource();

    function getRandomData() {
        if(graphDataPoints.length>0)
            graphDataPoints.shift();
        graphDataPoints.push.apply(graphDataPoints,serverDataPoints);

        var res = [];
        for (var i = 0; i < graphDataPoints.length; ++i) {
            res.push([i,parseFloat( graphDataPoints[i])])
        }
        return res;
    }

    var plot = $.plot("#placeholder", [ getRandomData() ], {
        series: {
            shadowSize: 0   // Drawing is faster without shadows
        },
        yaxis: {
            min: -0.5,
            max: 2.0
        },
        xaxis: {
            show: false
        }
    });

    var updateInterval = 3;

    function update() {
        plot.setData([ getRandomData() ]);
        // Since the axes don't change, we don't need to call plot.setupGrid()

        plot.draw();
        setTimeout(update, updateInterval);
    }

    update();
    // Add the Flot version string to the footer

    $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});

该图显示了一条不正确的直线的移动图。此外，图表不是从x轴的0开始绘制，这是第一个数据点开始的位置。

这看起来像是并发问题吗？这就是setupEventSource函数有eventsource.onmessage，它每秒都会被调用并更新serverDataPoints数组。另一方面，每隔几毫秒调用getRandomData来复制服务器数据并将其显示在图形上。这些都出现在$（function（）。

中

提前感谢您的帮助。

使用java SSE的实时flot图表无法正常工作

0 个答案: