高圖（高庫存）-數據不會顯示

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);

我對/ListedSecurities/GetChartData/1調用返回以下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屬性。