Question

这是我的用例。我正在使用Flume和Spark Streaming来计算从服务器生成的事件数。所以在spark的输出中我得到时间戳和事件数。每隔10秒后，旧值将被删除，新值将写入HDFS文件中。

我创建了Spring框架，它将从HDFS中提取数据，将其转换为json并将其推送到Highcharts。所以我试图生成一个实时样条曲线图，它将显示x轴的时间戳和y轴的计数，并在每10秒后从火花输出中获取新数据时更新它。但是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 }]
        });
    };

Answer 1

首先，由于此代码，您在图表中获得前导零：

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-data/live-data
修改您的updateStatusSeries()，以便它使用传递给它的回调，如下所示：http://www.in-example.com/?p=316

此外，日期格式（在tooltip.formatter中）应如下所示：

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

动态Highcharts未更新

1 个答案: