我倾向于尽可能减少对JSON的处理。我建议在服务器上将您的系列日期时间数据格式化为时期毫秒。当xAxis类型设置为datetime时,此方法似乎可接受于highcharts。您可以使用以下函数:
private long EpochTime(DateTime dt)
{
TimeSpan t = dt - new DateTime(1970, 1, 1);
long millisecondsSinceEpoch = (long)t.TotalSeconds * 1000;
return millisecondsSinceEpoch ;
}
在stovroz和wergeld的帖子中,有其他更现代的选项。
在将对象转换为客户端JSON时,请使用此选项。您需要返回一个日期/值点数组。我使用这个类:
public class TimePointData
{
public long date { get; set; }
public decimal value { get; set; }
}
我在SqlDataReader循环内这样使用它:
while (reader2.Read())
{
DateTime dTest = Convert.ToDateTime(reader2["XData"]);
TimePointData newPoint = new TimePointData()
{
date = EpochTime(dTest) ,
value = Convert.ToDecimal(reader2["YData"])
};
Series.data.Add(newPoint);
}
在 JavaScript 中设置选项如下:
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return moment(this.value).format("YYYY-MM-DD");
}
},
title: {
text: 'Date'
}
},
series: [{
data: $scope.data.TimeSeriesData[0].data
}]
这在我的MVC项目中起作用,使用webapi数据调用和angularjs代码创建可缩放区域图表的highcharts图形。还要记得做这件事时保持舌头的正确位置 :)
epoch
应该是var epoch = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc).AddHours(1)
吗? - Triet DoanAddHours(-1)
;如果你要调整减去纪元的结果,使用AddHours(1)
。但是再次强调,你不需要这样做来获得一个使用自己数据的工作图表,只有在某种原因下你想要与他们的示例完全匹配时才需要这样做。 - stovrozAddHours(-7)
。我必须仔细设置时间,以便xAxis能够正确显示,以及crosshairs
。非常感谢! - Triet Doan