C# 在MVC中按百分比在饼图上显示数据

在我的MVC5应用程序中，我有一个表，假设它的名称是Student，每个学生都属于一个团队。我想让学生们根据他们的团队按百分比进行展示。出于这个原因，我还创建了一个ViewModel，以便将学生实体与团队实体连接起来。那么，如何在剑道UI饼图上显示所需的数据呢？你能看一下代码并改正下面的错误吗？你能给出一个适合这种方法的视图吗？提前谢谢。

视图模型：

public class StudentViewModel
{
    public int StudentId { get; set; }

    public int TeamId { get; set; }

    public string TeamName { get; set; }

    public int TeamPercentage { get; set; }
}

public ActionResult Index_Read([DataSourceRequest] DataSourceRequest request)
{
    var dataContext = repository.Student;

    var result = dataContext.ToDataSourceResult(request, m => new StudentViewModel
        {
            StudentId = m.StudentId,
            TeamId = m.TeamId,
            TeamName = m.TeamName,

            TeamPercentage = //??? How can I obtain percentage by Lambda Expression ???
        }
    );
    return Json(result, JsonRequestBehavior.AllowGet);
}

控制器：

public class StudentViewModel
{
    public int StudentId { get; set; }

    public int TeamId { get; set; }

    public string TeamName { get; set; }

    public int TeamPercentage { get; set; }
}

public ActionResult Index_Read([DataSourceRequest] DataSourceRequest request)
{
    var dataContext = repository.Student;

    var result = dataContext.ToDataSourceResult(request, m => new StudentViewModel
        {
            StudentId = m.StudentId,
            TeamId = m.TeamId,
            TeamName = m.TeamName,

            TeamPercentage = //??? How can I obtain percentage by Lambda Expression ???
        }
    );
    return Json(result, JsonRequestBehavior.AllowGet);
}

---

你可以这样做：

视图模型

public class StudentViewModel
{
    public string category { get; set; }
    public int value { get; set; }
}

控制器（注意，我在查询中做了一些假设）

查看

@model IEnumerable<StudentViewModel>

@(Html.Kendo().Chart()
    .Name("chart")
    .Title(title => title.Text("Teams").Position(ChartTitlePosition.Bottom))
    .Legend(legend => legend.Visible(true))
    .Series(series => series.Pie(Model))
)

@model IEnumerable
@（Html.Kendo（）.Chart（））
.名称（“图表”）
.Title（Title=>Title.Text（“团队”）.Position（ChartTitlePosition.Bottom））
.Legend（Legend=>Legend.Visible（true））
.Series（Series=>Series.Pie（型号））
)

备选方案

另一种方法是使用数据源绑定

public class StudentViewModel
{
    public string TeamName{ get; set; }
    public int Percentage { get; set; }
}

@(Html.Kendo().Chart<StudentViewModel>()
    .Name("chart2")
    .DataSource(ds => ds.Read("GetTeamData", "Home"))
    .Series(series => series.Pie(m => m.Percentage, model => model.TeamName))
)

公共类学生视图模型
{
公共字符串TeamName{get；set；}
公共整数百分比{get；set；}
}
@（Html.Kendo（）.Chart（））
.名称（“图表2”）
.DataSource（ds=>ds.Read（“GetTeamData”，“Home”））
.Series（Series=>Series.Pie（m=>m.Percentage，model=>model.TeamName））
)

虽然我通过分组成功地用相关数据（名称和百分比）设置了相应的属性，但图表上没有任何内容。我认为视图上的图表定义应该是固定的。你能看一下上面的内容并改正一下吗？提前谢谢。我已经修复了代码并添加了一种替代方法。测试过了，在这里效果很好。应该足够让您上路了。除了在查看页面上呈现图表之外，一切都正常。唯一的问题与“将int转换为string”有关。当我在ViewModel上使用TeamName字符串值并尝试在Controller上将其设置为等于“s.Key”时，我遇到了一个错误。因此，我使用toString（）方法来解决这个问题。但是，尽管没有错误，并且数据可以从控制器正确发送，但图表不会呈现，并且除了标题之外，图表上没有任何内容。>>>我有所有必要的css和javascript文件，当我使用静态上下文时，我可以看到饼图。那么，关于索引页或呈现方法的问题是什么？显然，我不知道您的数据库结构，我的查询只是一个示例。您现在应该有足够的信息来实现这一点。请注意，除非将第二个示例与lambda表达式一起使用，否则模型必须具有名为“category”和“value”的属性。