zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    将数据导入带模板EXCEL
    c#.net循环将DataGridView中的数据赋值到Excel中,并设置样式
    c#.net对excel的操作——创建一个excel报表两个sheet就是2个表分别添加内容
    Sharepoint2013 中想要将网站另存为模板步骤
    使用SharePoint 2010 母版页
    命令添加用户到组
    随机生成10个数,填充一个数组,然后用消息框显示数组内容,接着计算数组元素的和,将结果也显示在消息框中
    大道至简第五章感悟
    Ljava.lang.Object;@ba8a1dc
    字符串最简单的加密与解密
  • 原文地址:https://www.cnblogs.com/chinasoft/p/8362235.html
Copyright © 2011-2022 走看看