如何在 MVC 中使用模型创建剑道饼图

Posted 2023-05-07

【中文标题】如何在 MVC 中使用模型创建剑道饼图

【英文标题】：How to create kendo pie chart with model in MVC

【发布时间】：2016-10-04 06:33:32

【问题描述】：

我正在尝试使用 Kendo UI 通过 MVC 中的模型和控制器创建饼图，该图将显示两种食物的总数，但由于附加错误，我无法获得结果。

饼图中显示的类型： 1）饮料和 2)膳食

我指的是这种图表。

Kendo UI Pie chart

此链接使用 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)#")
            )
        )

【问题讨论】：

您在控制器中创建的数据对于饼图没有意义，因此不清楚您实际想要显示的内容。要了解它是如何工作的，请将控制器中的代码替换为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。

斯蒂芬，感谢您宝贵的时间。我已经尝试过您给出的方法，效果非常好，但只需要您对此发表意见。我在您的代码模板中看到了 75 的百分比，但在我的情况下，我只有一个通过出售膳食或饮料赚取的金额。它可以是任何东西。例如：我从膳食中赚取了 5000 美元，从饮料中赚取了 10000 美元。那么，为了显示正确的信息，我是否必须将此总金额转换为某种百分比，否则将由工具本身处理？

我不知道（我从未使用过剑道），但我假设如果您要提供值 10000 和 5000（即加起来为 15000），该方法将足够聪明，可以转换为百分比（即 66.67 和 33.33）——至少我会这样写。你所能做的就是试试看会发生什么:)

【参考方案1】：

生成饼图的 Kendo 方法需要对象数组，每个对象代表饼图中的一个段。每个对象必须包含一个属性值（每个段在整体中所占的百分比）和段的名称。此外，它还可以包含一个颜色属性（以覆盖默认颜色）和一个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"
;

【讨论】：

解释得很好。