这是我的用例。我正在使用Flume和Spark Streaming来计算服务器生成的事件数。所以在火花的输出中，我得到了时间戳和事件数。每隔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 }]
});
};
首先，由于以下代码，您在图表中得到前导零：
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)
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句