愛上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	新三值圖類型。

感謝各位的閱讀！

回到目錄