Как создать круговую диаграмму кендо с моделью в MVC

Question

Я пытаюсь создать круговую диаграмму с помощью модели и контроллера в MVC с использованием пользовательского интерфейса Kendo, который покажет общее количество для двух видов продуктов питания, но я не смогу получить результаты за счет к прилагаемой ошибке.

Типы, чтобы показать в круговой диаграмме: 1) Напитки и 2) Питание

Я имею в виду такого рода диаграммы.

Kendo UI Pie chart

Эта ссылка показала несколько графиков с использованием Еогеаспа, но я просто озабочен только одной картой, которая будет отличать общие доходы от еды и напитков.

Мой контроллер:

public ActionResult _SpainElectricityProduction() 
     { 
      List<PieGraphModel> objList = new List<PieGraphModel>(); 
      for (int i = 0; i < 2; i++) 
      { 
       if (i == 0) 
       { 
        objList.Add(new PieGraphModel { coke = 10, pepsi = 20, Type = "Beverages", total = 30 }); 
       } 
       else 
       { 
        objList.Add(new PieGraphModel { chiniese = 50, italian = 40, Type = "Meals", total = 90 }); 
       } 
      } 
      return Json(objList); 
     } 





@(Html.Kendo().Chart<MvcRepo_Kendo.Models.PieGraphModel>() 
      .Name("chart") 
      .HtmlAttributes(new { @class = "small-chart" }) 
      .Legend(legend => legend 
       .Visible(false) 
      ) 
      .DataSource(ds => 
      { 
       ds.Read(read => read.Action("_SpainElectricityProduction", "Home")); 
      } 
      ) 
      .Series(series => series 
        .Pie(model => model.total) 
        .Padding(0) 
      ) 
      .Tooltip(tooltip => tooltip 
       .Visible(true) 
       .Format("{0:N0}") 
       .Template("#= category # - #= kendo.format('{0:P}', percentage)#") 
      ) 
     ) 

Answer 1

Метод Кендо для генерации круговой диаграммы ожидает и массив объектов, с каждым объектом, представляющим один сегмент в круговой диаграмме. Каждый объект должен содержать свойство для значения (процент, который каждый сегмент будет занимать в целом) и имя сегмента. Кроме того, он может содержать свойство для цвета (для переопределения цвета по умолчанию) и bool, чтобы указать, если сегмент «взорван».

Ваш PieGraphModel должен выглядеть (вы можете назвать свойства, что вы хотите)

public class PieGraphModel 
{ 
    public string Name { get; set; } 
    public float Value { get; set; } 
    public string Color { get; set; } // optional 
    public bool Explode { get; set; } // optional 
} 

и создать круговую диаграмму с 2-х сегментов, «Питание» и «Напитки», будучи 1/3 и 2/3, соответственно, ваш метод контроллера будет

List<PieGraphModel> model = new List<PieGraphModel>() 
{ 
    new PieGraphModel(){ Name = "Meals", Value = 33.33F }, 
    new PieGraphModel(){ Name = "Beverages", Value = 66.67F } 
}; 
return Json(model); 

и в представлении

.Series(series => series 
    .Pie(m => m.Value, m => m.Name) 
    .Padding(0) 
) 

Обратите внимание, что выражения должны соответствовать именам свойств. Если вы хотели указать Color и Explode, то это было бы

.Series(series => series 
    .Pie(m => m.Value, m => m.Name, m => m.Color, m => m.Explode) 
    .Padding(0) 
) 

который бы выход this pie chart если данные были

List<PieGraphModel> model = new List<PieGraphModel>() 
{ 
    new PieGraphModel(){ Name = "Hydro", Value = 22.0F, Color = "#03a9f4", Explode = true }, 
    new PieGraphModel(){ Name = "Solar", Value = 2.0F, Color = "#ff9800"}, 
    new PieGraphModel(){ Name = "Nuclear", Value = 49.0F, Color = "#fad84a"}, 
    new PieGraphModel(){ Name = "Wind", Value = 27.0F, Color = "#4caf50"} 
};