HighCharts (highstock) - 数据不会显示

Question

我正在尝试使用 HighStock API，但在显示从我的服务器返回的数据时遇到问题。

javascript查询如下：

var displayOHLCChart = function () {
    var $input = $(this);
    var listedId = $('[data-field="Id"]').val();
    var url = '/ListedSecurities/GetChartData/' + listedId;
    $.getJSON(url, function (data) {
        $('#ohlc-container').highcharts('StockChart', {
            rangeSelector: {
                selected: 2
            },

            title: {
                text: 'AAPL Stock Price'
            },

            series: [{
                type: 'ohlc',
                name: 'AAPL Stock Price',
                data: data,
                dataGrouping: {
                    enabled: false
                }

            }]
        });
    });
};

$("#ohlc-container").each(displayOHLCChart);

我对@9​​87654323@ 的调用返回以下JSON

编辑：复制并粘贴一些逗号

[{"date":"1/07/1996","DayOpen":2.95,"DayHigh":2.97,"DayLow":2.89,"DayClose":2.89},
{"date":"2/07/1996","DayOpen":2.91,"DayHigh":2.99,"DayLow":2.91,"DayClose":2.99},
{"date":"3/07/1996","DayOpen":3.00,"DayHigh":3.00,"DayLow":2.95,"DayClose":2.97},
{"date":"4/07/1996","DayOpen":2.95,"DayHigh":2.96,"DayLow":2.90,"DayClose":2.96},
{"date":"5/07/1996","DayOpen":2.96,"DayHigh":2.98,"DayLow":2.95,"DayClose":2.96},
{"date":"8/07/1996","DayOpen":2.95,"DayHigh":3.00,"DayLow":2.93,"DayClose":2.98},
{"date":"9/07/1996","DayOpen":2.98,"DayHigh":2.98,"DayLow":2.95,"DayClose":2.96}]

当页面呈现时，我看到图表标题、缩放按钮、时间轴滚动条，但没有数据。

如果我查看我的 java 脚本中的“数据”，它说它包含 7 个对象（上面每个日期一个），我可以深入查看实际元素。如果问题是“数据”返回对象内的对象，我该如何更改以下 LINQ 查询以返回正确的 JSON？

public ActionResult GetChartData(int? id)
    {
        var EODData = _unitOfWork.Repository<EODSecurityData>()
            .Query()
            .OrderBy(q => q
                .OrderBy(c => c.EODDate))
            .Filter(x => x.ListedSecurityId == id)
            .Get().ToList()
            .Select(r => new { date= r.EODDate.ToShortDateString(), r.DayOpen, r.DayHigh, r.DayLow, r.DayClose });
        return Json(EODData, JsonRequestBehavior.AllowGet);
    }

谢谢。

Answer 1

json有问题，集合中最后两项没有用逗号隔开。

这（第 5 行和第 6 行）：

[{"date":"1/07/1996","DayOpen":2.95,"DayHigh":2.97,"DayLow":2.89,"DayClose":2.89},
{"date":"2/07/1996","DayOpen":2.91,"DayHigh":2.99,"DayLow":2.91,"DayClose":2.99},  
{"date":"3/07/1996","DayOpen":3.00,"DayHigh":3.00,"DayLow":2.95,"DayClose":2.97},
{"date":"4/07/1996","DayOpen":2.95,"DayHigh":2.96,"DayLow":2.90,"DayClose":2.96},
{"date":"5/07/1996","DayOpen":2.96,"DayHigh":2.98,"DayLow":2.95,"DayClose":2.96}    
{"date":"8/07/1996","DayOpen":2.95,"DayHigh":3.00,"DayLow":2.93,"DayClose":2.98}   
{"date":"9/07/1996","DayOpen":2.98,"DayHigh":2.98,"DayLow":2.95,"DayClose":2.96}]

应该是这样的：

[{"date":"1/07/1996","DayOpen":2.95,"DayHigh":2.97,"DayLow":2.89,"DayClose":2.89},
{"date":"2/07/1996","DayOpen":2.91,"DayHigh":2.99,"DayLow":2.91,"DayClose":2.99},  
{"date":"3/07/1996","DayOpen":3.00,"DayHigh":3.00,"DayLow":2.95,"DayClose":2.97},
{"date":"4/07/1996","DayOpen":2.95,"DayHigh":2.96,"DayLow":2.90,"DayClose":2.96},
{"date":"5/07/1996","DayOpen":2.96,"DayHigh":2.98,"DayLow":2.95,"DayClose":2.96},    
{"date":"8/07/1996","DayOpen":2.95,"DayHigh":3.00,"DayLow":2.93,"DayClose":2.98},   
{"date":"9/07/1996","DayOpen":2.98,"DayHigh":2.98,"DayLow":2.95,"DayClose":2.96}]

这是一个带有更正数据的 jsFiddle：

http://jsfiddle.net/hutchonoid/99DUu/

更新

我认为日期必须以毫秒为单位。

如果您在此处看到示例 jsFiddle：

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/basic-line/

表示数据如下，毫秒日期和绘图

...
/* May 2006 */
[1147651200000,67.79],
[1147737600000,64.98],
[1147824000000,65.26],
[1147910400000,63.18],
[1147996800000,64.51],
[1148256000000,63.38],
[1148342400000,63.15],
[1148428800000,63.34],
[1148515200000,64.33],
[1148601600000,63.55],
[1148947200000,61.22],
[1149033600000,59.77],
...

Answer 2

我发现这与我的数据通过 JSON 对象传回的方式有关。 hutchonoid 的道具，其 jsfiddle 示例为我指明了正确的方向。

为了获得格式正确的 JSON 结果，我需要生成一个具有相关属性的通用对象，并且还必须将 DateTime 元素修改为 Javascript datetime 元素。代码最终看起来像这样。

public ActionResult GetChartData(int? id)
    {
        if (id == null)
        {
            return Json(null);
        }
        var EODData = _unitOfWork.Repository<EODSecurityData>()
            .Query()
            .OrderBy(q => q
                .OrderBy(c => c.EODDate))
            .Filter(x => x.ListedSecurityId == id)
            .Get().ToList()
            .Select(r => new { date= r.EODDate, r.DayOpen, r.DayHigh, r.DayLow, r.DayClose });

        List<object> output = new List<object>();
        foreach (var dataElement in EODData)
        {
            output.Add(new object[] { ToJsonTicks(dataElement.date), dataElement.DayOpen, dataElement.DayHigh, dataElement.DayLow, dataElement.DayClose });
        }

        return Json(output, JsonRequestBehavior.AllowGet);
    }

    public long ToJsonTicks(DateTime value)
    {
        return (value.ToUniversalTime().Ticks - ((new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc)).Ticks)) / 10000;
    }

注意实体框架结果的循环以将每个结果添加到对象列表，以及使用ToJsonTicks 方法转换DateTime 属性。