HighChart X 轴日期时间数值

Question

我正在尝试在HighChart中绘制一个arearange类型。这是链接。当我查看数据时，它的格式如下[1230771600000, -5.8, 0.1]。第一个代表日期时间，第二个是最小值，第三个是最大值。

所以，我的问题是，他们如何获得那个数字来表示一天？在那个元组中，1230771600000表示2009年1月1日。如果我在服务器端使用C#，如何将DateTime对象转换为该数字？简而言之，如何将“2009年1月1日”转换为“1230771600000”？谢谢你的帮助。

- Triet Doan

Answer 1

他们使用自Unix纪元以来的毫秒，即自1970年01月01日UTC以来，因此可以使用以下方式进行转换：

var epoch = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);
var data = myDates.Select(x => (x - epoch).TotalMilliseconds);

然而，由于Highsoft的位置的原因，他们示例数据中的时间都是在UTC时间上午1点（可能是因为），所以它们都比将上述应用于舍入的UTC日期得到的值高1000 * 60 * 60。您只需使用UTC午夜值即可，但如果您希望完全匹配他们的数字，请在转换中添加AddHours（1）或类似内容。

- stovroz

---

那么你的意思是 epoch 应该是 var epoch = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc).AddHours(1) 吗？ - Triet Doan

不，如果你要调整纪元，使用AddHours(-1)；如果你要调整减去纪元的结果，使用AddHours(1)。但是再次强调，你不需要这样做来获得一个使用自己数据的工作图表，只有在某种原因下你想要与他们的示例完全匹配时才需要这样做。 - stovroz

成功了！我的时区是GMT+7，所以我设置了AddHours(-7)。我必须仔细设置时间，以便xAxis能够正确显示，以及crosshairs。非常感谢！ - Triet Doan

确保在夏令时开始时，不会遇到任何问题！ - stovroz

Answer 2

如果你只考虑日期部分（而不考虑时间）。这是我作为扩展方法的实现：

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;
        }

- Victor LG

Answer 3

我倾向于尽可能减少对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图形。还要记得做这件事时保持舌头的正确位置 :)

- davaus

Answer 4

你需要进行一些预处理。在VB.NET中，我们通过循环遍历数据数组来构建高级图表的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 value 发送到此函数中，它会输出 JavaScript 时间。

- wergeld