C# HighChart xAxis日期时间值
我正在尝试绘制一个C# HighChart xAxis日期时间值,c#,datetime,highcharts,C#,Datetime,Highcharts,我正在尝试绘制一个arearange输入HighChart。这是你的电话号码。当我查看数据时,它的格式如下[1230771600000,-5.8,0.1]。第一个表示日期时间,第二个表示最小值,第三个表示最大值 所以,我的问题是,他们是如何得到代表一天的数字的?在该元组中,1230771600000表示2009年1月1日。如果在服务器端使用C#,如何将DateTime对象转换为该数字?简而言之,如何将2009年1月1日的转换为1230771600000?谢谢您的帮助。您需要进行一些预处理。我们在
arearange
输入HighChart
。这是你的电话号码。当我查看数据时,它的格式如下[1230771600000,-5.8,0.1]
。第一个表示日期时间,第二个表示最小值,第三个表示最大值
所以,我的问题是,他们是如何得到代表一天的数字的?在该元组中,1230771600000表示2009年1月1日。如果在服务器端使用C#,如何将
DateTime
对象转换为该数字?简而言之,如何将2009年1月1日的转换为1230771600000
?谢谢您的帮助。您需要进行一些预处理。我们在VB.NET中所做的是循环使用数据数组来构建highcharts series.data,并执行以下操作:
Private Function ToEpoch(value As Date) As Double
Dim span As TimeSpan = (value.ToUniversalTime -
New System.DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc))
Return span.TotalMilliseconds
End Function
因此,我们将解析为MM/DD/YYYY的SQL值
发送到该函数中,它会吐出javascript时间。它们使用自1970-01-01 UTC以来的毫秒,因此使用类似以下内容进行转换:
var epoch = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);
var data = myDates.Select(x => (x - epoch).TotalMilliseconds);
然而,由于某些原因(可能是因为),他们的示例数据中的时间都是UTC凌晨1点,因此它们都比您应用上述四舍五入UTC日期得到的时间高1000*60*60。您可以只使用UTC午夜值,但如果您希望精确匹配它们的数字,只需在转换过程中使用AddHours(1)
或类似的值。我更愿意将JSON处理保持在最低限度。我建议将服务器上的序列日期时间数据格式化为历元毫秒。当xAxis类型设置为datetime时,highcharts似乎可以接受这一点。您可以使用此功能:
private long EpochTime(DateTime dt)
{
//long form code to be clear
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"); //format as you need to
}
},
title: {
text: 'Date'
}
},
series: [{
data: $scope.data.TimeSeriesData[0].data //whatever is correct for your data structure
}]
这对我来说是一个MVC项目,使用webapi数据调用和angularjs代码在可缩放的面积图中创建highcharts图形。另外,当你这样做的时候,不要忘记把舌头放在正确的位置:)如果你只考虑日期部分(不考虑时间)。这是我作为扩展方法的方法:
public static double ToEpochDateHighCharts(this DateTime date)
{
TimeSpan t = new DateTime(date.Year, date.Month, date.Day, 0, 0, 0, DateTimeKind.Utc) - new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);
return t.TotalMilliseconds;
}
所以你的意思是epoch
应该是var epoch=new DateTime(1970,1,1,0,0,DateTimeKind.Utc)。AddHours(1)
?不,AddHours(-1)
如果你正在调整epoch,或者AddHours(1)
如果你正在调整减去epoch的结果。但是同样,你不需要这样做来获得一个包含你自己数据的工作图表,只有当你出于某种原因想要匹配他们示例中的精确数字时,它才起作用!我的时间是GMT+7,所以我设置了AddHours(-7)
。我必须仔细设置时间,以便xAxis能够正确显示,十字光标
。谢谢!如果夏令时开始了,确保你不会被任何问题刺痛!