愛上MVC~圖表的(de)使用Chart
圖(tu)表(biao)在一(yi)(yi)個系統中(zhong)(zhong)是必(bi)須的(de)(de),MVC架構把它當然(ran)是一(yi)(yi)個擴(kuo)展(zhan)集(ji)成了進來,通(tong)過簡(jian)單(dan)的(de)(de)幾(ji)句話就(jiu)可以生成一(yi)(yi)個風格多樣的(de)(de)圖(tu)表(biao),這給報(bao)表(biao)的(de)(de)開發帶(dai)來了很大(da)(da)的(de)(de)方便,大(da)(da)叔的(de)(de)項(xiang)目中(zhong)(zhong)也做了一(yi)(yi)個測試,把主要(yao)的(de)(de)代碼(ma)貼(tie)出來,和(he)大(da)(da)家(jia)分享一(yi)(yi)下。
首(shou)先一(yi)個Action,返回(hui)你需要的(de)圖(tu)表
public void Chart(string type = "Column") { new Chart(width: 600, height: 400, theme: ChartTheme.Green) .AddTitle("人員(yuan)流動情(qing)況") .AddSeries(name: "Employee" , chartType: type//Column,Pie , xValue: new[] { "一(yi)月份(fen)", "二月份", "三月份", "四(si)月(yue)份(fen)", "五月份", "六(liu)月份", "七月份", "八(ba)月份(fen)", "九月份" } , yValues: new[] { "2", "6", "4", "5", "3", "4", "9", "2", "5" }) .Write(); }
代碼中的(de)cartType表(biao)示圖表(biao)的(de)類型,一般也就(jiu)是Column(柱(zhu)狀(zhuang)),Pie(餅狀(zhuang)),Range(范圍)等等。
幾種常用的圖表截圖
柱形
餅形
范圍
如(ru)果你(ni)希望將(jiang)數據庫的數據生成(cheng)圖表,需(xu)要將(jiang)名稱字(zi)段(duan)和統計(ji)字(zi)段(duan)放到一個匿(ni)名的IEnumerable<T>集合里,例如(ru)
/// <summary> /// 通(tong)過數據生成圖表 /// </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("人員流動情(qing)況") .AddSeries(name: "Employee" , chartType: string.IsNullOrWhiteSpace(type) ? "Column" : type)//Column,Pie,Range,Stock,Point,Area .DataBindTable(total, "Name") .Write(); }
結果如下
當然如果你要設計(ji)多維度報(bao)表,你需要讓(rang)你的(de)IEnumerable<T>對(dui)象存在多個元(yuan)素即可,也就是(shi)說,它(ta)里面的(de)元(yuan)素除(chu)了一(yi)個"X-Field",其它(ta)的(de)都是(shi)維度字段,所以要根(gen)據情況去使用。
而(er)如(ru)果各位(wei)還需要(yao)其它的圖表類型,還可以參數(shu)下拉(la)的參數(shu)列(lie)表
| 說明 | |
|---|---|
| Area |
面積圖類型。 |
| Bar |
條形圖(tu)類型。 |
| BoxPlot |
盒須圖類型(xing)。 |
| Bubble |
氣泡圖類型。 |
| Candlestick |
K 線圖(tu)類型。 |
| Column |
柱形圖類型。 |
| Doughnut |
圓環圖類型。 |
| ErrorBar |
誤(wu)差(cha)條(tiao)形(xing)圖類型。 |
| FastLine |
快速掃描(miao)線(xian)圖(tu)類(lei)型。 |
| FastPoint |
快速點(dian)圖類型(xing)。 |
| Funnel |
漏斗圖(tu)類型。 |
| Kagi |
卡(ka)吉圖類(lei)型(xing)。 |
| Line |
折線圖類型。 |
| Pie |
餅(bing)圖(tu)類型。 |
| Point |
點(dian)圖類型。 |
| PointAndFigure |
點數(shu)圖類型。 |
| Polar |
極坐標圖類型。 |
| Pyramid |
棱錐圖(tu)類型。 |
| Radar |
雷達圖(tu)類型。 |
| Range |
范圍圖類(lei)型。 |
| RangeBar |
范圍(wei)條形圖類型(xing)。 |
| RangeColumn |
范圍柱形圖類型。 |
| Renko |
磚形圖(tu)類型。 |
| Spline |
樣條圖類型。 |
| SplineArea |
樣條面(mian)積圖類型。 |
| SplineRange |
樣條范圍圖(tu)類型。 |
| StackedArea |
堆積(ji)面積(ji)圖類型。 |
| StackedArea100 |
百分比堆(dui)積(ji)面(mian)積(ji)圖類型。 |
| StackedBar |
堆積條形圖類型。 |
| StackedBar100 |
百分比(bi)堆積條形圖類型。 |
| StackedColumn |
堆積柱形圖類型。 |
| StackedColumn100 |
百分比堆積柱(zhu)形圖類型。 |
| StepLine |
階梯線圖類型。 |
| Stock |
股價圖類型(xing)。 |
| ThreeLineBreak |
新三值圖類型。 |
感謝各位的閱讀!