EasyMvc入门教程-图形控件说明（21）线形图+柱状图+饼形图

本章将介绍一些基本但常用的图形：线型图，柱状图和饼形图。

以上三种图形对于的数据都是键值对数组，请参考第一个例子：

@{

    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

巴特西

EasyMvc入门教程-图形控件说明（21）线形图+柱状图+饼形图

最新文章

热门文章