javascript - 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

このコードを使用

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

.NET Datetime Type と互換性があるように Highcharts に設定します。

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

Highcharts で xAxis を設定します。

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