ASP.NET MVC 3 Beta: Built-in support for charts（MVC3 Razor中使用图表的最佳方案）

女爷i 2023-08-17 15:51 115阅读 0赞

选择了很久，终于找到代码最简单的解决方案：其实就是MS自带的chart。MS Chart存在已久，只是在以前的用法中，需要保存img，这将导致MVC的访问冲突（曾困扰过我们一个项目），大致就是：

以下可用：.net3.5 + mvc + MS Chart

以下不可用：**.net4.0** \+ mvc + MS Chart（神奇的是，MS Chart从.net4.0开始才是自带的，看来是发布前忘了测试mvc了）

终于找到一个帖子是关于这种用法的一个变种，在**.net4.0 + mvc3 + MS Chart**环境中测试有效。

原帖在此[http://weblogs.asp.net/gunnarpeipman/archive/2010/10/10/asp-net-mvc-3-beta-built-in-support-for-charts.aspx][http_weblogs.asp.net_gunnarpeipman_archive_2010_10_10_asp-net-mvc-3-beta-built-in-support-for-charts.aspx]

不过原帖是英文的，下面是大致的中文过程。笔者把例子推进一下，可以传入一个title导致报表的变化。当然实际使用的时候就不是只传title，而是会是例如reports/anualsales?year=2011之类。

--------------------

步骤1：在View中要放图表的位置写上

--------------------

步骤2：在controller中实现action，这里就是实现HomeController/Chart(string title)

using System.Web.Helpers; //Chart/ChartTheme在这里定义。

public ActionResult Chart(string title)  
        \{  
            var model = new ChartModel();  
            var data = model.GetChartData();  
            new Chart(400, 200, ChartTheme.Blue)  
                .AddTitle(title)  
                .DataBindTable(data, "X")  
                .Write("png");  
            return null;  
        \}  
神奇之处是不需要为这个Action编写View，而且还return null。这个本人也不懂为什么，不过能用就够了：）

--------------------

步骤3：把唯一的悬念ChartModel类及其方法GetChartData()实现了：

using System.Collections; //IList/ArrayList在这里定义的

public class ChartModel  
    \{  
        public IList GetChartData()  
        \{  
            return new ArrayList  
            \{  
                new \{ X = DateTime.Now.AddMonths(-2), Y = 200 \},  
                new \{ X = DateTime.Now.AddMonths(-1), Y = 300 \},  
                new \{ X = DateTime.Now, Y = 500 \}  
            \};  
        \}  
    \}

--------------------

当然这里的ChartModel是个测试类，如果回到刚才的Sales场景，这个类不需要存在，同时把步骤2变成：

using MyApp.Models; //Sales在这里定义的，是自己代码中原来就有的。

public ActionResult anualsales(int year)  
\{  
    new Chart(400, 200, ChartTheme.Blue)

.AddTitle(title)  
        .DataBindTable(Sales.Data(), "X")  
        .Write("png");  
    return null;  
\}

另需在Sales中实现public IList Data()就可以了（正常情况这是一个已经存在的接口）。

全部过程比把大象关进冰箱还少一步。

不过，这个helper有很多限制，比如现在只有AddTitle / AddSerise / AddLegend这几个函数，不能增加Marker / 调整每条线的颜色粗细 / 不能……总之比非MVC的Chart（*System.Web.UI.DataVisualization.Charting.Chart* ）差很多，不过用起来很方便。期待MVC4里边能增加几个新的函数了。

关于如何使用MS Chart，请参考：[http://weblogs.asp.net/scottgu/archive/2008/11/24/new-asp-net-charting-control-lt-asp-chart-runat-quot-server-quot-gt.aspx][http_weblogs.asp.net_scottgu_archive_2008_11_24_new-asp-net-charting-control-lt-asp-chart-runat-quot-server-quot-gt.aspx]

ChartTheme其实就是这个链接中提到的那些aspx代码（到ChartTheme定义中可以看到代码本身），只要重载就能做自己的Theme，实现一些简单功能（如移动legend的位置等）。

.net 3.5例程：[http://archive.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=1591][http_archive.msdn.microsoft.com_mschart_Release_ProjectReleases.aspx_ReleaseId_1591]

.net 4.0例程：[http://archive.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=4418][http_archive.msdn.microsoft.com_mschart_Release_ProjectReleases.aspx_ReleaseId_4418]

点击下载免费的敏捷开发教材：《[火星人敏捷开发手册][Link 1]》

![0_1311055886783t.gif][]![0_1311055987UN6B.gif][]

转载于:https://www.cnblogs.com/JPAORM/archive/2011/05/01/2510506.html

[http_weblogs.asp.net_gunnarpeipman_archive_2010_10_10_asp-net-mvc-3-beta-built-in-support-for-charts.aspx]: http://weblogs.asp.net/gunnarpeipman/archive/2010/10/10/asp-net-mvc-3-beta-built-in-support-for-charts.aspx
[http_weblogs.asp.net_scottgu_archive_2008_11_24_new-asp-net-charting-control-lt-asp-chart-runat-quot-server-quot-gt.aspx]: http://weblogs.asp.net/scottgu/archive/2008/11/24/new-asp-net-charting-control-lt-asp-chart-runat-quot-server-quot-gt.aspx
[http_archive.msdn.microsoft.com_mschart_Release_ProjectReleases.aspx_ReleaseId_1591]: http://archive.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=1591
[http_archive.msdn.microsoft.com_mschart_Release_ProjectReleases.aspx_ReleaseId_4418]: http://archive.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=4418
[Link 1]: http://blog.csdn.net/cheny_com/article/details/6616794
[0_1311055886783t.gif]: http://hi.csdn.net/attachment/201107/19/0_1311055886783t.gif
[0_1311055987UN6B.gif]: /images/20230810/4fb49ea591de4f1f9a8f13f018132291.png