Kendo 图表分组不正确，ASP.NET MVC

Question

我正在尝试配置 kendo 图表以显示我的模型数据：

public class CallByCountry
{
    public DateTime Date { get; set; }      
    public int Month { get; set; }      
    public int Year { get; set; }
    public DateTime Period { get { return new DateTime(Year, Month, 1); } }       
    public string Country { get; set; }       
    public int CallsCount { get; set; }
}

示例数据：

Month   Year   Country   CallsCount
7       2015   USA          5
8       2015   USA          3
8       2015   UK           9
...

我的图表：

     @(Html.Kendo().Chart<CallByCountry>()
            .Name("CallByCountry")
            .ChartArea(chartArea => chartArea
                .Background("transparent")
            )                
            .DataSource(dataSource => dataSource
                .Read(read => read.Action("CallsByCountry", "Reports"))
                .Group(group => { group.Add(model => model.Country); })
                .Sort(sort => sort.Add(model => new { model.Period}).Ascending())
            )
            .Series(series =>
            {
                series.Line(model => model.CallsCount)
                    .Name("#= group.value #").Style(ChartLineStyle.Smooth);
            })
            .Legend(legend => legend
                .Position(ChartLegendPosition.Bottom)
            )
            .ValueAxis(axis => axis.Numeric().Labels(l => l.Format("{0:n0}")).MajorUnit(1))
            .CategoryAxis(axis => axis
                .Categories(model => model.Period)
                 .Date().BaseUnit(ChartAxisBaseUnit.Months)
                 .Labels(lbl => lbl.Format("{0:MM/yyyy}"))
            )
                    .Tooltip(tooltip => tooltip
                        .Visible(true)
                                .Template("#= series.name #: #= value #"))
        )

控制器：

public ActionResult CallsByCountry()
{ 
     List<CallByCountry> callsByCountry = new List<CallByCountry>();
        foreach (var call in _callsRepo.GetAll().ToList())
        {
            var callByCountry = new CallByCountry();
            callByCountry.Date = call.StartDate.Date;
            callByCountry.Country = _contactRepo.Find(call.ContactID).Country;
            callsByCountry.Add(callByCountry);
        }

        IEnumerable<CallByCountry> data = callsByCountry.GroupBy(i => new { i.Date.Month, i.Date.Year, i.Country })
                                   .Select(group => new CallByCountry()
                                   {
                                       Country = group.Key.Country,
                                       Month = group.Key.Month,
                                       Year = group.Key.Year,
                                       CallsCount = group.Count()
                                   }).OrderBy(x => x.Period);

        return Json(data, JsonRequestBehavior.AllowGet);
}

但是，我得到的数据表示不正确。类别X轴仅显示一个月“7/2015”，而8月份的部分数据显示在7月份类别中。我想这可能是 json 解析问题，它与日期一起出现，但我只使用月份和年份。请指教，我做错了什么？如果有任何帮助，我将不胜感激！

Answer 1

我调整了一些东西。我建议不要在你的模型上做 Period 属性，而是做这样的事情（创建 DateTime 而不是字符串）：

public DateTime Date { get { return new DateTime(Year, Month, 1); } }

这将允许您在网格的 CategoryAxis 上利用 .Date() 构建器，如下所示：

.CategoryAxis(axis => axis
          .Categories(model => model.Date)
          .Date().BaseUnit(ChartAxisBaseUnit.Months)
          .Labels(lbl => lbl.Format("{0:MM/yyyy}"))
)

数据的排序似乎也有问题。我把你的.Sort()调整为

.Sort(sort => sort.Add(model => new {model.Date}).Ascending())

但我注意到数据仍然没有正确显示。在您的 CallsByCountry() 操作方法中，在 return 之前对数据进行排序。

完整示例：https://github.com/mmillican/KendoMvcExamples/commit/9ebaa7c4b5c2ddd2a65890cf3d5d77a484d8a3aa

Kendo 图表分组不正确，ASP.NET MVC

Kendo chart incorrect grouping, ASP.NET MVC

c#

asp.net

asp.net-mvc

kendo-ui

kendo-asp.net-mvc