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

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

Типы для отображения на круговой диаграмме: 1) напитки и 2) блюда.

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

Круговая диаграмма пользовательского интерфейса кендо

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

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

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

Ошибка при использовании модели


asp.net-mvc-4 kendo-ui kendo-asp.net-mvc kendo-chart kendo-ui-mvc
person Sweetie    schedule 04.06.2016    source источник
comment
Данные, которые вы создаете в контроллере, не имеют смысла для круговой диаграммы, поэтому неясно, что вы на самом деле хотите отобразить. Чтобы понять, как это работает, замените код в контроллере на var data = new[]{ new { type = "Beverages", percent = 25 }, new { type = "Meals", percent = 75 } }; return Json(data);, а затем в представлении — на .Series(series => series.Pie(m => m.percent , m => m.type).Padding(0) ). Будет сгенерирована круговая диаграмма с 2 сегментами, где напитки равны 1/4, а блюда — 3/4.   -  person    schedule 04.06.2016
comment
Стивен, спасибо за ваше драгоценное время. Я попробовал способ, указанный вами, и он сработал потрясающе, но мне просто нужно ваше мнение по этому поводу. Я видел процент в вашем шаблоне кода, который равен 75, но в моем случае у меня просто есть сумма, заработанная на продаже еды или напитков. Это может быть что угодно. Например: я заработал 5000 долларов на еде и 10000 долларов на напитках. Итак, чтобы показать правильную информацию, мне нужно преобразовать эту общую сумму в какие-то проценты, или она будет обработана самим инструментом?   -  person Sweetie    schedule 04.06.2016
comment
Я понятия не имею (я никогда не использовал кендо), но я предполагаю, что если бы вы предоставили значения 10000 и 5000 (т.е. суммировали до 15000), метод был бы достаточно умным, чтобы преобразовать их в проценты (т.е. 66,67 и 33,33) - по крайней мере так я бы написал. Все, что вы можете сделать, это попробовать и посмотреть, что произойдет :)   -  person    schedule 04.06.2016

Ответы (1)


arrow_upward
6
arrow_downward

Метод кендо для создания круговой диаграммы предполагает наличие массива объектов, где каждый объект представляет один сегмент круговой диаграммы. Каждый объект должен содержать свойство для значения (процент, который будет занимать каждый сегмент в целом) и имя сегмента. Кроме того, он может содержать свойство для цвета (чтобы переопределить цвет по умолчанию) и 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)
)

который выводит эту круговую диаграмму, если данные

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"}
};
person Community    schedule 06.06.2016
comment
объяснил очень хорошо. - person Garry; 17.07.2019