爱上MVC~图表的使用Chart

简介:

图表在一个系统中是必须的,MVC架构把它当然是一个扩展集成了进来,通过简单的几句话就可以生成一个风格多样的图表,这给报表的开发带来了很大的方便,大叔的项目中也做了一个测试,把主要的代码贴出来,和大家分享一下。

首先一个Action,返回你需要的图表

复制代码
      public void Chart(string type = "Column")
        {
            new Chart(width: 600, height: 400, theme: ChartTheme.Green)
               .AddTitle("人员流动情况")
               .AddSeries(name: "Employee"
               , chartType: type//Column,Pie
               , xValue: new[] { "一月份", "二月份", "三月份", "四月份", "五月份", "六月份", "七月份", "八月份", "九月份" }
               , yValues: new[] { "2", "6", "4", "5", "3", "4", "9", "2", "5" })
               .Write();
        }
复制代码

代码中的cartType表示图表的类型,一般也就是Column(柱状),Pie(饼状),Range(范围)等等。

几种常用的图表截图

柱形

饼形

范围

如果你希望将数据库的数据生成图表,需要将名称字段和统计字段放到一个匿名的IEnumerable<T>集合里,例如

     /// <summary>
        /// 通过数据生成图表
        /// </summary>
        /// <param name="type"></param>
        public void DataChart(string type)
        {
            var total = productList.Select(i => new
            {
                Name = i.Name,
                Price = i.UnitPrice
            }).ToList();//必须要ToList()操作

            new Chart(width: 600, height: 400, theme: ChartTheme.Green)
               .AddTitle("人员流动情况")
               .AddSeries(name: "Employee"
               , chartType: string.IsNullOrWhiteSpace(type) ? "Column" : type)//Column,Pie,Range,Stock,Point,Area
               .DataBindTable(total, "Name")
               .Write();
        }

结果如下

当然如果你要设计多维度报表,你需要让你的IEnumerable<T>对象存在多个元素即可,也就是说,它里面的元素除了一个"X-Field",其它的都是维度字段,所以要根据情况去使用。

而如果各位还需要其它的图表类型,还可以参数下拉的参数列表

说明
Area

面积图类型。

Bar

条形图类型。

BoxPlot

盒须图类型。

Bubble

气泡图类型。

Candlestick

K 线图类型。

Column

柱形图类型。

Doughnut

圆环图类型。

ErrorBar

误差条形图类型。

FastLine

快速扫描线图类型。

FastPoint

快速点图类型。

Funnel

漏斗图类型。

Kagi

卡吉图类型。

Line

折线图类型。

Pie

饼图类型。

Point

点图类型。

PointAndFigure

点数图类型。

Polar

极坐标图类型。

Pyramid

棱锥图类型。

Radar

雷达图类型。

Range

范围图类型。

RangeBar

范围条形图类型。

RangeColumn

范围柱形图类型。

Renko

砖形图类型。

Spline

样条图类型。

SplineArea

样条面积图类型。

SplineRange

样条范围图类型。

StackedArea

堆积面积图类型。

StackedArea100

百分比堆积面积图类型。

StackedBar

堆积条形图类型。

StackedBar100

百分比堆积条形图类型。

StackedColumn

堆积柱形图类型。

StackedColumn100

百分比堆积柱形图类型。

StepLine

阶梯线图类型。

Stock

股价图类型。

ThreeLineBreak

新三值图类型。

感谢各位的阅读!

本文转自博客园张占岭(仓储大叔)的博客,原文链接:爱上MVC~图表的使用Chart,如需转载请自行联系原博主。

目录
相关文章
|
XML 缓存 前端开发
一起谈.NET技术,ASP.NET MVC 3 Beta初体验之超酷的Chart
  前面一篇文章:ASP.NET MVC 3 Beta初体验之WebGrid介绍了WebGrid控件的使用,ASP.NET MVC 3 Beta中才内置Chart的。这篇文章中将介绍Chart的使用。
1114 0
|
XML 前端开发 .NET
一起谈.NET技术,ASP.NET MVC 3 Beta初体验之超酷的Chart:3D效果
  在前一篇文章:ASP.NET MVC 3 Beta初体验之超酷的Chart中介绍了Chart的使用,但是没有介绍到3D效果。这篇文章将介绍一下Chart的3D效果的展示。声明一点的是:这个Chart控件可能没有一些开源或者不开源,收费或者不收费的组件那般强大,我相信未来这个控件会越来越强大的。
1077 0
|
4月前
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
55 0
|
7月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
211 0
|
7月前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
83 0
|
存储 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(五)
经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情等功能的开发,今天继续讲解购物车功能开发,仅供学习分享使用,如有不足之处,还请指正。
173 0