本章将介绍一些基本但常用的图形：线型图，柱状图和饼形图。
以上三种图形对于的数据都是键值对数组，请参考第一个例子：
@{
var data = new List<LineItem>();
var rd = new Random();
data.Add(new LineItem() { Name = "第一节车厢人数", Value = rd.Next(50) });
data.Add(new LineItem() { Name = "第二节车厢人数", Value = rd.Next(50) });
data.Add(new LineItem() { Name = "第三节车厢人数", Value = rd.Next(50) });
data.Add(new LineItem() { Name = "第四节车厢人数", Value = rd.Next(50) });
data.Add(new LineItem() { Name = "第五节车厢人数", Value = rd.Next(50) });
}
@Html.Q().Chart().Line().SourceItem(data).ShowTool()
显示效果为：
如果大家希望以曲线方式显示，直接追加：ShowSmooth()方法即可，如果希望以区域图显示，则继续追加：ShowArea()即可。
第二个例子：动态更新
实现代码：
@Html.Q().Chart().Line().AjaxUrl("/Line/GetUpdatedData")
对应的Action实现代码为：
public IActionResult GetUpdatedData()
{
var result = new List<LineItem>();
var rd = new Random();
result.Add(new LineItem() { Name = "第一节车厢人数", Value = rd.Next(50) });
result.Add(new LineItem() { Name = "第二节车厢人数", Value = rd.Next(50) });
result.Add(new LineItem() { Name = "第三节车厢人数", Value = rd.Next(50) });
result.Add(new LineItem() { Name = "第四节车厢人数", Value = rd.Next(50) });
result.Add(new LineItem() { Name = "第五节车厢人数", Value = rd.Next(50) });
return Json(result);
}
如果大家想实现动态更新追加的效果，则前端不动，将Action返回的数据出现新的Name即可，请参考如下例子：
public IActionResult GetCpuUsedPercent()
{
var result = new List<LineItem>();
var rd = new Random();
result.Add(new LineItem() { Name = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), Value = 100 + rd.Next(DateTime.Now.Second + 50) });
return Json(result);
}
对应的效果为：
第三个例子：柱状图与饼形图的实现。
柱状图与饼形图的使用方法和线状图一样，只是对应的控件分别为：Bar与Pie，代码如下:
@Html.Q().Chart().Bar().ShowStep().AjaxUrl("/Bar/AppendData")
@Html.Q().Chart().Pie().AjaxUrl("/Pie/AppendData").ShowTool().Title("车厢")
对于的效果图为：
总结：二维图形比较简单，但是却比较实用，希望尽可能将数据图形化展示，后面EasyMvc会尽量增加3D的显示。
更多使用示例请浏览在线示例：http://core.zwc.cn