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脚本中查看'data'，它说它包含7个对象（上面每个日期一个），我可以深入查看实际元素。如果问题是'data'是对象内部的返回对象，我该如何更改以下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;
    }

请注意，实体框架结果的循环将每个元素添加到一个Object列表中，并使用DateTime方法转换ToJsonTicks属性。

HighCharts（highstock） - 数据不会显示

2 个答案: