来自JSON的x轴上的Highcharts.js DateTime仅显示数字

Question

我正在努力使用带有highcharts.js的简单折线图。 我有一些来自asp.net mvc控制器的json数据：

public JsonResult GetSensorLineData(string SensorName)
    {
        List<SensorMeasurement> result= this.SQLSensorMeasuresRepository.FindAllMeasurements(SensorName).ToList();

        List<string> days = new List<string>();
        List<decimal> values = new List<decimal>();

        foreach (var item in result)
        {
            values.Add(item.Value);
            days.Add(item.DateTime.ToString());
        }

        dynamic data = new
        {
            Categories=days,
            Values = values
        };

        return Json(data, JsonRequestBehavior.AllowGet);
    }

在我的cshtml文件中，我这样做：

 homeDataService.init('@this.BaseUrl()');

        homeDataService.getTemperatureLineData("Roomtemperature", function myfunction(data) {
            var dataCategories=[];

            for (var i = 0; i < data.Categories.length; i++) {
                var strVal = data.Categories[i];
                var dateTimeParts = strVal.split(" ");
                var datePart = dateTimeParts[0];
                var timePart = dateTimeParts[1];

                var dateParts = datePart.split(".");
                var timeParts = timePart.split(":"); //german DateTime String coming from ASP.NET


                var date = new Date(dateParts[2], (dateParts[1] - 1), dateParts[0], timeParts[0], timeParts[1]);
                data.Categories[i]=(date.getTime());

            }
            var chart;
            $('#temperature-line').highcharts({
                chart: {
                    type: 'line'
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    type: 'datetime',
                    categories:data.Categories,
                    minorTickInterval: 10,
                    minTickInterval:10,

                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Temperature'
                    }
                },

                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: 'Temperature',
                    data: data.Values
                }]
            });

        });

正如您所看到的，我正在改变德国的日期时间，以便高级图表可以解释它。但事实并非如此。我只得到这个输出：

更新： 好了，我现在从控制器回来了：

我将图表代码更改为（见下文），但是当我运行此浏览器时，浏览器就会挂起。我做错了什么？

var chart;
            $('#temperature-line').highcharts({
                chart: {
                    type: 'line'
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    type: 'datetime'

                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Temperature'
                    }
                },

                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: 'Temperature',
                    data: data
                }]
            });

        });

Answer 1

您不能同时使用日期时间轴和类别 - 它严格来说是轴类型中的一个。

您需要删除类别，并将时间戳作为数据x值发送，或者按照您希望的方式格式化日期并将其用作类别。

如果您要显示时间序列数据，使用日期时间值而不是类别总是更有意义。

Answer 2

使用此代码

Datetime.TimeOfDay.TotalMilliseconds

 var StatusOK = from u in counters
     where u.StatusID == 1
     select new { x = LogDate.Value.TimeOfDay.TotalMilliseconds, y = u.CountOK };

return jScript.Serialize(counters.ToArray());

或

(DateTime.Now-new DateTime(1970,1,1)).TotalMilliseconds

并在Highcharts中设置兼容.NET Datetime Type：

  Highcharts.setOptions({
        global: { useUTC: true } });

并在Highcharts中设置xAxis：

 xAxis: {
        type: 'datetime',
        tickPixelInterval: 100, 
        maxZoom:  60 
    },