将 ISO 序列化日期时间 JSON 渲染到 Highcharts 时间序列时出现问题？

Question

我正在尝试使用最新的 Highcharts 从 Web API 呈现 ISO 格式的数据。我正在使用 TypeScript 和 datejs (http://www.datejs.com/)。

我打算在民意调查中更新此图表，并且该系列可以在请求之间进行显着转换，因此我决定从头开始销毁并重新创建图表。我尝试直接设置选项并重绘，但似乎没有任何效果。

但是为了确保我注释掉了最初的图表创建和销毁，我仍然得到同样的错误。我检查过解析器正在返回一个日期对象，而且确实如此，而且数据似乎是正确的。

我猜这与我构建数据元素的方式有关。

对于高图表的时间序列数据，这是可接受的结构吗：

var data: [Date, number][] = [, ];

我的模特：

export interface Chart {
    Title: string;
    Series: ChartSeries[];
    XAxisTitle: string;
    YAxisTtile: string;
}
export interface ChartSeries {
    Title: string;
    Points: ChartDataPoint[];
}
export interface ChartDataPoint {
    X: string;
    Y: number;
}

XML 中的示例系列（使用 NewtonSoft.Json 进行 Json 序列化）

<ChartSeries>
    <Points>
        <ChartDataPoint>
            <X>2015-12-16T00:00:00</X>
            <Y>184</Y>
        </ChartDataPoint>
        <ChartDataPoint>
            <X>2015-12-16T05:00:00</X>
            <Y>168</Y>
        </ChartDataPoint>
        <ChartDataPoint>
            <X>2015-12-16T07:00:00</X>
            <Y>282</Y>
        </ChartDataPoint>
    </Points>
    <Title>Version: UNK;Service Type: 1002;Server: UNK;Method Name: GetAllCustomerDetails
    </Title>
</ChartSeries>

ViewModel 的相关部分：

 protected Draw(): void {
        var chart = this.ChartData();
        if (!Util.Obj.isNullOrUndefined(chart)) {
            this.IsDrawing(true);
            var series: HighchartsSeriesOptions[] = [];
            for (var i = 0; i < chart.Series.length; i++) {
                var s = chart.Series[i];
                var data: [Date, number][] = [, ];
                for (var p = 0; p < s.Points.length; p++) {
                    var point = s.Points[p];
                    data.push([Date.parse(point.X), point.Y]);
                }
                series.push({
                    type: "line",
                    data: data,
                    name: s.Title
                });
            }

            var options: HighchartsOptions = {
                chart: {
                    renderTo: this.chartElementName,
                    ignoreHiddenSeries: false
                },
                series: series,
                title: chart.Title,
                yAxis: {
                    type: 'logarithmic',
                    minorTickInterval: 1,
                    title: chart.YAxisTtile
                },
                xAxis: {
                    type: 'datetime',
                    title: chart.XAxisTitle
                }
            };
            this.Chart.destroy();
            this.Chart = new Highcharts.Chart(options);
            this.IsDrawing(false);
        }
    }

错误：

  Line: 14084
  Error: Unable to set property 'index' of undefined or null reference

来自 highcharts.src.js 的错误的一些上下文：

generatePoints: function () {
        var series = this,
            options = series.options,
            dataOptions = options.data,
            data = series.data,
            dataLength,
            processedXData = series.processedXData,
            processedYData = series.processedYData,
            pointClass = series.pointClass,
            processedDataLength = processedXData.length,
            cropStart = series.cropStart || 0,
            cursor,
            hasGroupedData = series.hasGroupedData,
            point,
            points = [],
            i;

        if (!data && !hasGroupedData) {
            var arr = [];
            arr.length = dataOptions.length;
            data = series.data = arr;
        }

        for (i = 0; i < processedDataLength; i++) {
            cursor = cropStart + i;
            if (!hasGroupedData) {
                if (data[cursor]) {
                    point = data[cursor];
                } else if (dataOptions[cursor] !== UNDEFINED) { // #970
                    data[cursor] = point = (new pointClass()).init(series, dataOptions[cursor], processedXData[i]);
                }
                points[i] = point;
            } else {
                // splat the y data in case of ohlc data array
                points[i] = (new pointClass()).init(series, [processedXData[i]].concat(splat(processedYData[i])));
            }
            points[i].index = cursor; // For faster access in Point.update <-- error happens here, there is a single item in the collection that is undefined
        }

根据要求，堆栈跟踪：

Series.generatePoints   @   highcharts.src.js:14084
Series.translate    @   highcharts.src.js:14165
(anonymous function)    @   highcharts-more.js:53
obj.(anonymous function)    @   highcharts.src.js:660
(anonymous function)    @   highcharts.src.js:12830
each    @   highcharts.src.js:1106
Chart.renderSeries  @   highcharts.src.js:12829
(anonymous function)    @   highcharts-3d.js:26
obj.(anonymous function)    @   highcharts.src.js:660
Chart.render    @   highcharts.src.js:12937
Chart.firstRender   @   highcharts.src.js:13112
Chart.init  @   highcharts.src.js:11841
(anonymous function)    @   highcharts-3d.js:25
obj.(anonymous function)    @   highcharts.src.js:660
Chart.getArgs   @   highcharts.src.js:11746
Highcharts.Chart    @   highcharts.src.js:11720
ChartViewModel.Draw @   ChartViewModel.ts:160
(anonymous function)    @   ChartViewModel.ts:180
(anonymous function)    @   jquery-2.1.4.js:3256
fire    @   jquery-2.1.4.js:3099
self.fireWith   @   jquery-2.1.4.js:3211
deferred.(anonymous function)   @   jquery-2.1.4.js:3301
(anonymous function)    @   ChartViewModel.ts:244
(anonymous function)    @   jquery-2.1.4.js:3256
fire    @   jquery-2.1.4.js:3099
self.fireWith   @   jquery-2.1.4.js:3211
done    @   jquery-2.1.4.js:8264
(anonymous function)    @   jquery-2.1.4.js:8605

Answer 1

事实证明有两个问题：

var data: [Date, number][] = [, ];

为了解决异常：

var data: [Date, number][] = [];

为了正确呈现日期：

var data: [number, number][] = [];

和

var d = Date.parse(point.X);
data.push([
 Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds()), 
 point.Y
]);

将 ISO 序列化日期时间 JSON 渲染到 Highcharts 时间序列时出现问题？

Problems rendering an ISO Serialized DateTime JSON into a Highcharts time-series?

datejs

highcharts

typescript