我正在尝试使用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)#")
)
)
用于生成饼图的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
}
并创建一个饼图,该饼图包含“ Meals”和“ Beverages”两个细分,分别为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"}
};
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句