带有MVC的Kendo UI股票图表

时间:2014-05-02 03:14:51

标签: c# asp.net-mvc kendo-ui kendo-asp.net-mvc

我有一个这样的模型:

public class StockHistoryChart
{
    public IEnumerable<IStockHistory> Series { get; set; }
    public Stock Stock { get; set; }
}

public class StockHistory:IStockHistory
{
    public virtual Stock Stock { get; set; }
    public virtual Guid StockHistoryId { get; set; }
    public virtual DateTime Date { get; set; }
    public virtual decimal Open { get; set; }
    public virtual decimal Close { get; set; }
    public virtual decimal Volume { get; set; }
    public virtual decimal DayLow { get; set; }
    public virtual decimal DayHigh { get; set; }
}

我可以很好地填充这个模型,但是当我尝试使用Kendo UI渲染模型时,我遇到了问题。网站上的演示做了不同的事情,但我试图使用局部视图将其作为ajax调用加载,所以我尝试这样的事情:

@(Html.Kendo().StockChart<StockHistoryChart>()
    .Name(string.Format("stock-chart-{0}", Html.CreateSafeId(Model.Stock.Symbol)))
    .Title(string.Format("{0} ({1}) - Currently {2:C}/ share", Model.Stock.CompanyName, Model.Stock.Symbol, Model.Stock.ValuePerShare))
    .DataSource(ds => ds.Model(model => model.Field(m => m.Series)))
    .DateField("Date")
    .Series(s => s.Candlestick(Model.Series.Select(x => new { x.Open, High = x.DayHigh, Low = x.DayLow, x.Close })))
    .Navigator(nav => nav.Series(series => series.Area(s => s.Series).Field("Close") ))
    .CategoryAxis(ca => ca.Date()
        .Notes(n => n.Data(d =>
            {
                var date = new DateTime(DateTime.Today.Year, 1, 1);
                var min = Model.Series.Min(x => x.Date);
                var span = date.Year - min.Year;
                for (var year = date; year.Year < span; year = year.AddYears(-1))
                {
                    var y = year;
                    d.Add()
                    .Value(year)
                    .Label(l => l.Text(string.Format("{0:yyyy}", y)));
                }
            }))
        )
    )

...图表将呈现,但没有数据显示。我需要做些什么才能让它发挥作用?我似乎无法通过示例来解决这个问题,而且文档非常抽象。

1 个答案:

答案 0 :(得分:1)

您已定义Kendo DataModel (link attached),但尚未提供数据源。您将需要在数据源中执行读取操作,或者,如果您将模型传递到视图中,则需要像这样定义股票图表:

@(Html.Kendo().StockChart(Model)
...
)