Kendo UI Chart在.NET Core中控制器方法数据绑定失败问题

尝试将Kendo UI Chart与控制器方法返回值集成，图表首次加载时会触发该方法，但数据未绑定到图表。使用ViewBag结合foreach的方式可正常工作，希望实现直接通过控制器返回值完成数据绑定。

ViewModel #

namespace xxx.xxx.Web.Models.Analytics
{
    public class AnalyticsChartsModel
    {
        public double MetricValue { get; set; }
        public string MetricAxisLabel { get; set; }
        public string ChartTitleLine1 { get; set; }
        public string ChartTitleLine2 { get; set; }
        public string Axis1Title { get; set; }
        public string Axis2Title { get; set; }
        public string LegendTitle { get; set; }
        public string TitleStr { get; set; }
        public string LocationStr { get; set; }
        public string CategoryMetricStr { get; set; }
        public string TimePeriodStr { get; set; }
        public string TimeGroupByStr { get; set; }
        public string HourOfInterestStr { get; set; }
        public int AlertStatusId { get; set; }
        public ToolTipStr ToolTipStr { get; set; }
        public int Threshold { get; set; }
        public int XAxisLabelOriantation { get; set; }
        public int TotalAlerts { get; set; }
        public int Lk101 { get; set; }
        public int Hu103 { get; set; }
        public int Rt104 { get; set; }
        public DateTime StartTime { get; set; }
    }

    public class ArrayOfAnalyticsChartsModel
    {
        public List<AnalyticsChartsModel> AnalyticsChartsModel { get; set; }
    }

    public class LastTwevelMonthViewModel
    {
        public ArrayOfAnalyticsChartsModel ArrayOfAnalyticsChartsModel { get; set; }
    }

    public class ToolTipStr
    {
        public object div { get; set; }
    }
}

控制器方法 #

[HttpPost]
public IActionResult _LastTwevelMonthsChart()
{
    StreamReader r = new StreamReader("last12.json");
    string jsonString = r.ReadToEnd();
    LastTwevelMonthViewModel lastTwelMonth = JsonConvert.DeserializeObject<LastTwevelMonthViewModel>(jsonString);
    System.Diagnostics.Debug.WriteLine(Json(lastTwelMonth.ArrayOfAnalyticsChartsModel.AnalyticsChartsModel));
    IEnumerable<AnalyticsChartsModel> analyticsChartsModel = lastTwelMonth.ArrayOfAnalyticsChartsModel.AnalyticsChartsModel.AsEnumerable();
    // ViewBag.lst12mn = lastTwelMonth.ArrayOfAnalyticsChartsModel.AnalyticsChartsModel.AsEnumerable();
    return Json(analyticsChartsModel);
}

Chart HTML（原代码） #

<div class="demo-section wide">
    @(
        Html.Kendo().Chart<xxx.xxx.Web.Models.Analytics.AnalyticsChartsModel>()
        .Name("chart")
        .Title("Site Visitors Stats /thousands/")
        .Legend(legend => legend
        .Visible(false)
        )
        .DataSource(ds => ds.Read(read => read
        .Action("_LastTwevelMonthsChart", "Analytics")
        .Type(HttpVerbs.Post)
        ))
        .AutoBind(true)
        .Series(series =>
        {
            series.Column(model => model.MetricValue);
        })
        .ChartArea(chartArea => chartArea
        .Background("#fff")
        )
        .Tooltip(tooltip => tooltip
        .Visible(true)
        .Template("#= series.name #: #= value #")
        )
    )                 
</div>

解决方案 #

问题核心：之前用ViewBag+foreach时，是为每个AnalyticsChartsModel实例创建独立Column系列（每个系列仅含一个值）；但DataSource绑定方式需单个Column系列对应所有数据点，每个数据点由MetricValue提供，同时必须指定X轴绑定字段来显示标签。

调整后的Chart配置如下：

<div class="demo-section wide">
    @(
        Html.Kendo().Chart<xxx.xxx.Web.Models.Analytics.AnalyticsChartsModel>()
        .Name("chart")
        .Title("Site Visitors Stats /thousands/")
        .Legend(legend => legend.Visible(false))
        .DataSource(ds => ds
            .Read(read => read
                .Action("_LastTwevelMonthsChart", "Analytics")
                .Type(HttpVerbs.Post)
            )
        )
        .AutoBind(true)
        // 新增X轴配置，绑定到MetricAxisLabel字段作为分类标签
        .XAxis(x => x
            .Categories(model => model.MetricAxisLabel)
            .Labels(labels => labels.Rotation(Model.XAxisLabelOriantation))
        )
        .Series(series =>
        {
            // 绑定MetricValue作为数据值，指定系列名称和颜色
            series.Column(model => model.MetricValue)
                  .Name("访问量")
                  .Color("#3399cc");
        })
        .ChartArea(chartArea => chartArea.Background("#fff"))
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Template("#= category #: #= value #")
        )
    )                 
</div>

额外检查点 #

1. 确认控制器返回的JSON是AnalyticsChartsModel对象的数组，且MetricValue、MetricAxisLabel字段有有效值，可通过浏览器开发者工具的Network标签查看请求返回内容。
2. 若需保留原ViewBag方式的多系列展示（每个模型对应一个系列），需调整DataSource绑定逻辑或使用数据聚合，但当前场景更适合单系列多数据点的展示方式。

内容的提问来源于stack exchange，提问作者Moovendra Dhinesh babu