显示在饼图中的MVC按百分比数据 [英] Showing data by percentage on Pie Charts in MVC

问题描述

在我MVC5应用程序，我有表可以说，它的名字是学生和属于一个团队每一个学生。我想按照自己的团队按百分比向学生展示。出于这个原因，我也为了加入学生实体团队实体创建一个视图模型。所以，我怎么能显示我想要的数据对剑道​​的UI饼图？你可以看看在code和纠正下面的错误？而你能不能给适合这种方法的一个查看样本？提前致谢。

视图模型：

 公共类StudentViewModel
{
    公众诠释StudentId {获得;组; }

    公众诠释TeamId {获得;组; }

    公共字符串TeamName {获得;组; }

    公众诠释TeamPercentage {获得;组; }
}
 

控制器：

 公众的ActionResult Index_Read（[DataSourceRequest] DataSourceRequest要求）
{
    VAR的DataContext = repository.Student;

    VAR的结果= dataContext.ToDataSourceResult（请求，M =＆gt;新建StudentViewModel
        {
            StudentId = m.StudentId，
            TeamId = m.TeamId，
            TeamName = m.TeamName，

            TeamPercentage = // ???我怎样才能获得百分比拉姆达防爆pression ???
        }
    ）;
    返回JSON（结果，JsonRequestBehavior.AllowGet）;
}
 

解决方案

您可以做这样的事情：

视图模型

 公共类StudentViewModel
{
    公共字符串类{获得;组; }
    公共int值{获得;组; }
}
 

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

 公众的ActionResult Index_Read（）
{
    变种teamCount = repository.Team.Count（）;
    VAR的结果= repository.Student.GroupBy（G =＆GT; g.TeamName）。选择（S =＆gt;新建StudentViewModel {类= s.Key，值= s.Count（）/ teamCount}）;
    //试想一下，结果中包含这样的事情：{类=1队，值=20}，{类=队2，值=30}，{类=三队，值= 10}，{类=团队4，值=40}
    返回查看（结果）;
}
 

查看

  @model IEnumerable的＆LT; StudentViewModel＆GT;

@（Html.Kendo（）。图（）
    。名称（图）
    .title伪（标题=＆GT; title.Text（小组），位置（ChartTitlePosition.Bottom））
    .Legend（传说=＆GT; legend.Visible（真））
    .Series（系列=＆GT; series.Pie（型号））
）
 

另类

另一种方式，将要使用的数据源结合做

 公共类StudentViewModel
{
    公共字符串TeamName {获得;组; }
    公众诠释百分比{获得;组; }
}

@（Html.Kendo（）图＆LT; StudentViewModel＆GT;（）
    。名称（chart2）
    .DataSource（DS =＆GT; ds.Read（GetTeamData，家））
    .Series（系列=＆GT; series.Pie（M =＆GT; m.Percentage，模型=＆GT; model.TeamName））
）
 

In my MVC5 application I have table lets's say it's name is Student and every student belonging to a Team. I want to show students according to their teams by percentage. For this reason I also created a ViewModel in order to join Student entity with Team entity. So, how can I show the data I want on Kendo UI pie chart? Could you have a look at the code and correct the mistakes below? And could you give a View samples suitable to this approach? Thanks in advance.

ViewModel:

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

    public int TeamId { get; set; }

    public string TeamName { get; set; }

    public int TeamPercentage { get; set; }
}

Controller:

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);
}

解决方案

You could do something like this:

Viewmodel

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

Controller (note I've made some assumptions in the query)

public ActionResult Index_Read()
{
    var teamCount = repository.Team.Count();
    var result = repository.Student.GroupBy(g => g.TeamName).Select(s => new StudentViewModel { category = s.Key, value = s.Count()/teamCount });
    // Imagine result contains something like this: { category = "Team 1", value = "20" }, { category = "Team 2", value = "30" }, { category = "Team 3", value = "10" }, { category = "Team 4", value = "40" }
    return View(result);
}

View

@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))
)

Alternative

Another way to do it would be using a data source binding.

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))
)

这篇关于显示在饼图中的MVC按百分比数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！