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

Question

我正在努力使用 highcharts.js 绘制简单的折线图。 我有一些来自 asp.net mvc Controller 的 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
                }]
            });

        });

如您所见，我正在转换德语日期时间，以便 highcharts 可以解释它。然而事实并非如此。我只得到这个输出:

更新: 好的，现在我从 Controller 返回:

我将图表代码更改为(见下文)，但是当我运行它时，浏览器只是挂起。我做错了什么？

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 值发送，或者按照您希望的显示方式设置日期格式并将其用作类别。

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