爱上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

新三值图类型。

感谢各位的阅读!

回到目录

posted @ 2016-05-20 16:09  张占岭  阅读(2600)  评论(5编辑  收藏  举报