Javascript HighChart-实时图表X轴中的日期时间错误
我将HighChart用于Live Chart(数据每10秒更改一次)。在每秒钟,都会发生一个ajax调用,并以json的形式从控制器获取数据。在本例中,我可以每10秒获取一次数据,但X轴上显示的时间是错误的。不是显示正确的时间,而是显示距离当前时间超过4的时间 这是HTML+js文件Javascript HighChart-实时图表X轴中的日期时间错误,javascript,razor,highcharts,dotnethighcharts,Javascript,Razor,Highcharts,Dotnethighcharts,我将HighChart用于Live Chart(数据每10秒更改一次)。在每秒钟,都会发生一个ajax调用,并以json的形式从控制器获取数据。在本例中,我可以每10秒获取一次数据,但X轴上显示的时间是错误的。不是显示正确的时间,而是显示距离当前时间超过4的时间 这是HTML+js文件 <!DOCTYPE html> <html> <head> <title>Index</title> @*//Add JQUERY*@
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
@*//Add JQUERY*@
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
@*//Add HighChart.js*@
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: getData
}
},
title: {
text: 'Live Bin Usage'
},
xAxis: {
type:'datetime',
tickPixelInterval: 150
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'Time'
}]
});
});
/**
* Request data from the server, add it to the graph and set a timeout to request again
*/
function getData() {
$.ajax({
url: '/AswinDemo/FetchData',
dataType: 'json',
success: function (data) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is
// longer than 20
var x = (new Date()).getTime(), // current time
y = Math.random();
// add the point
chart.series[0].addPoint([x ,data.BinUsage], true, shift);
// call it again after one second
setTimeout(getData, 1000);
},
cache: false
});
}
</script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>
public ActionResult FetchData()
{
Random rn = new Random();
return Json(new { BinUsage = rn.Next(), Time = DateTime.Now.TimeOfDay.ToString()} ,JsonRequestBehavior.AllowGet );
}
以下是图表的屏幕截图:-
您可以看到我的图表中的时间与电脑的时间不同(在任务栏中)
我已通过将global.useUTC设置为false解决了问题。谢谢。假设实际数据没有导致差异的问题,请尝试将
设置为全局。使用UTC
设置为false
-@jlbigs非常感谢。这很有帮助