动态高清没有更新

这是我的用例。我正在使用水槽和火花流来计算服务器生成的事件数量。因此，在火花的输出中，我会得到时间戳和事件数量。每10秒钟后，删除了旧值，并将新值写在HDFS中的文件中。

我创建了弹簧框架，该框架将从HDF中提取数据将其转换为JSON并将其推到HighCharts。因此，我正在尝试生成一个实时样条图表，该图表将显示X轴和Y轴计数的时间戳，并在每10秒后从Spark输出中获取新数据，并将其更新。但是X轴并没有变化，我可以看到y轴的10个零值。因此，我无法获得更新的Y值。我敢肯定，我在Java脚本中缺少一些东西。因为从春季的控制台上，我可以看到每10秒钟后发生一次事件。但是它没有在图表中反映。

我过去两个星期都被困在这里，迫切需要帮助。任何帮助都感激不尽。谢谢。

 <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://code.highcharts.com/highcharts.js" ></script>
        <script type="text/javascript" src="http://code.highcharts.com/maps/modules/exporting.js" ></script>
        <script type="text/javascript" src="http://code.highcharts.com/modules/drilldown.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
        <script type="text/javascript" src="js/app/appStart.js" ></script>
        <link type="text/css" href="css/app.css" rel="stylesheet">
    <script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
   </head>
    <body>
        <div  class="chart" id="statusChart" >
        </div> 
    </body>
    $(function() {
        var url = 'statistics';
        $.ajax(url).done(function(data) {
            loadStatusChart(data);
        });
    });
    function updateStatusSeries(series){
        var url = 'statistics';
        $.ajax(url).done(function(data) {
            var statusCode = data.statusCode[0];
            series.addPoint([statusCode.label, statusCode.value], true, true);
        });
    }
    function loadStatusChart(statistics) {
        var StatusCode = statistics.statusCode;
        var StatusSeries = [];
        $.each(StatusCode, function(index, item) {
            var timeInSeconds = item.label/1000;
            for(var i = 10; i >= 1; i--){
                StatusSeries.push({
                    x : (timeInSeconds - (i*10))*1000,
                    y : 0
                });
            }
            StatusSeries.push({
                x : item.label,
                y : item.value
            });
        })
        var x = StatusCode.length;
        $("#statusChart").highcharts({
            chart : {
                type : 'spline',
                //animation : Highcharts.svg,
                marginRight : 10,
                events : {
                    load : function(){
                        //set up updating of the chart each second
                        var series = this.series[0];
                        setInterval(function (){
                            updateStatusSeries(series);
                        }, 10000);
                    }
                }         
            },
            title: {
                text: 'Live Data'
            },
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Number of Counts'
                },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('yyyy/mm/dd hh:mm:ss', this.x) + '<br/>' +
                        Highcharts.numberFormat(this.y, 2);
                }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{ data: StatusSeries }]
        });
    };

首先，由于此代码：

for(var i = 10; i >= 1; i--){  // <----- 10
    StatusSeries.push({
        x : (timeInSeconds - (i*10))*1000,
        y : 0  // <----- zero values
    });
}

第二，您的图表没有前进，因为在此部分

events : {
    load : function(){
        //set up updating of the chart each second
        var series = this.series[0];
        setInterval(function (){
            updateStatusSeries(series); // <----- Not updating series
        }, 10000);
    }
}

updateStatusSeries(series)实际上没有更新series，因此图表没有获得新数据，而只是停留在同一位置。

修复您可以

创建一个全局chart对象并使用它访问其系列，如以下所述：http：//www.highcharts.com/docs/working-with-with-data/live-data/live-data
修改您的updateStatusSeries()，以便使用传递给它的回调，如下所示：http：//www.in-example.com/?p=316

另外，应该像这样进行日期格式（在tooltip.formatter中）：

Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x)

相关内容

最新更新

热门标签：