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

感謝各位的閱讀！

回到目錄