HighChart- 实时图表 X 轴中的错误日期时间
HighChart- Wrong Datetime in the X-Axis for Live Chart
我将 HighChart 用于实时图表(数据每 10 秒更改一次)。在每一秒中,将发生 ajax 调用并从控制器获取数据为 json。在示例中,我可以每 10 秒获取一次数据,但 X 轴上显示的时间是错误的。它没有显示正确的时间,而是显示距离当前时间超过 4 的时间。
这是HTML+js文件
<!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 );
}
以下是图表的屏幕截图:-
你可以看到我图表中的时间与PC(在任务栏中)的时间不同
我通过将 global.useUTC 设置为 false 解决了这个问题。谢谢。
我将 HighChart 用于实时图表(数据每 10 秒更改一次)。在每一秒中,将发生 ajax 调用并从控制器获取数据为 json。在示例中,我可以每 10 秒获取一次数据,但 X 轴上显示的时间是错误的。它没有显示正确的时间,而是显示距离当前时间超过 4 的时间。
这是HTML+js文件
<!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 );
}
以下是图表的屏幕截图:- 你可以看到我图表中的时间与PC(在任务栏中)的时间不同
我通过将 global.useUTC 设置为 false 解决了这个问题。谢谢。