Question

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

饼图中显示的类型： 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)#")
            )
        )

Answer 1

生成饼图的Kendo方法需要和对象数组，每个对象代表饼图中的一个段。每个对象必须包含值的属性（每个段在整体中占据的百分比）和段的名称。此外，它可以包含颜色的属性（以覆盖默认颜色）和bool以指示该细分是否已被爆炸＆＃39;。

您的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个段的饼图，＆＃34; Meals＆＃34;和＃34; Beverages＆＃34;分别是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"}
};

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

1 个答案: