爱上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>对象存在多个元素即可，也就是说，它里面的元素除了一个"Ｘ-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	新三值图类型。

感谢各位的阅读！

回到目录