在ASP.NET MVC3中，可否有图表的相关控件或MVC图表教程使用？

答案也有，就是：ASP.NET MVC3 RAZOR Chart图表。

下面请看相关教程介绍：

一：创建一个RAZOR Chart

public Chart(

int width,宽度

int height,高度

string theme = null,主题由System.Web.Helpers.ChartTheme 静态类提供

string themePath = null 主题地址 xml格式

);

new Chart(width: 600, height: 400
         , theme: ChartTheme.Green  
         ,themePath:null
        )
 
 

二：添加RAZOR Chart标题

public Chart AddTitle(

string text = null, 添加标题

string name = null

//设置唯一标示 System.Web.UI.DataVisualization.Charting.Title object.

);

 
 .AddTitle(text:"chat title",name:"chat1")
 
 

三：添加RAZOR Chart数据源

public Chart AddSeries(string name = null,

string chartType = "Column",

//System.Web.UI.DataVisualization.Charting.SeriesChartType 下的枚举值

string chartArea = null,

//获取或设置用于绘制数据系列的 ChartArea 对象（如果有）的名称。

string axisLabel = null, 获取或设置系列的轴标签文本。

string legend = null, 获取或设置与 Legend 对象关联的系列的名称。

int markerStep = 1, //获取或设置用于决定数据点标记的显示频率的值。

IEnumerable xValue = null, x轴的数据源

string xField = null, x轴的数据绑定的字段。

IEnumerable yValues = null,     Y轴的数据源

string yFields = null   Y轴的数据绑定的字段。

);

 
.AddSeries(
            name: "Stuednt"
            , xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "张1" }
            ,yValues: new[] { "2", "6", "4", "5", "3" }
            , chartType: type.ToString()          
            , axisLabel: "获取或设置系列的轴标签文本"
            , legend: xVal[3]
            , markerStep :3          
           
            )
 

3.1反复调用AddSeries可以添加多个

3.2重复绑定

如果同时指定 yValues 和yFields ，会同时显示

同时指定 xValues 和xFields ，xFields优先。

3.3使用xml作为数据源

@using System.Data;
@{var dataSet = new DataSet();
  dataSet.ReadXmlSchema(Server.MapPath("/App_Data/data.xsd"));
  dataSet.ReadXml(Server.MapPath("/App_Data/data.xml"));
  var dataView = new DataView(dataSet.Tables[0]);
  new Chart(width: 400, height: 300
             , theme: ChartTheme.Vanilla
            )
             .AddSeries("Default", chartType: "Pie",
            xValue: dataView, xField: "Name",
            yValues: dataView, yFields: "Sales")
            .Write();
}

四：RAZOR Chart数据绑定

public Chart DataBindTable(IEnumerable dataSource, 数据源

string xField = null ，x轴字段

);

List<CMS5_Razor.Models.Test> list = new List<CMS5_Razor.Models.Test>();
    for (int i = 0; i < 5; i++) {
        list.Add(new CMS5_Razor.Models.Test() { Name = "name" + i, Order = i, Content = "Content"+i });
    }

//----------------------------


.DataBindTable(list, xField: "Name")
 

五：添加图注

.AddLegend(title:"添加图注")

六：保存数据

string xmlPath = "savedchart.xml";
chart.SaveXml(xmlPath);

七：RAZOR Chart图表与缓存

1保存图表到缓存

public string SaveToCache(string key = null,

int minutesToCache = 20,缓存时间，分钟为单位

bool slidingExpiration = true 是否平滑显示

);

2从缓存中读出 

Chart.GetFromCache(  string key = null ); 
@{
    //保存到缓存
    var mychart = Chart.GetFromCache("mychartkey");
    if (mychart != null) {
         mychart.AddTitle("从缓存中读出"+DateTime.Now);
        mychart.Write();
    } else {
        mychart = new Chart(width: 600, height: 400)
            .AddTitle("保存进缓存"+DateTime.Now)
            .AddSeries(
                name: "Employee",
                xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
                yValues: new[] { "2", "6", "4", "5", "3" })
             .Write() ;
        mychart.SaveToCache(key: "mychartkey", minutesToCache: 11, slidingExpiration: false);
    } 
}

八：保存到文件

@{//保存到文件
    var mychart = new Chart(width: 400, height: 300)
               .AddTitle("保存到文件再从文件中读取")
               .AddSeries(
                   name: "Employee",
                   xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
                   yValues: new[] { "2", "6", "4", "5", "3" });
    var path = "~/Content/Image/mychart.jpg";
    var imgpath = Server.MapPath(path);
    mychart.Save(path: imgpath, format: "jpeg");
    }
<img  src="@Href(path)" />

九：其他

1 更多图表的样式