ASP.NET MVC2 chart圖表

1 創建一個Chart

2 添加標題

3 添加數據源

3.1 反覆調用AddSeries可以添加多個

3.2 重複綁定 3.3 使用xml作爲數據源

4 數據綁定

5 添加圖注

6 保存數據

7 圖表與緩存

8 保存到文件

9 其他

 

1創建一個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 )

 

2添加標題

public Chart AddTitle(

string text = null, 添加標題

string name = null

//設置唯一標示 System.Web.UI.DataVisualization.Charting.Title object.

);

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

 

3添加數據源

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(); }

 

4數據綁定

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")

5添加圖注

 

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

  

6保存數據

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

 

7圖表與緩存

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); } }

 

 

8保存到文件

 

@{//保存到文件 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)" />

 

9其他

1 更多圖表的樣式

	成員名稱	說明
	Point	點圖類型。
	FastPoint	快速點圖類型。
	Bubble	氣泡圖類型。
	Line	折線圖類型。
	Spline	樣條圖類型。
	StepLine	階梯線圖類型。
	FastLine	快速掃描線圖類型。
	Bar	條形圖類型。
	StackedBar	堆積條形圖類型。
	StackedBar100	百分比堆積條形圖類型。
	Column	柱形圖類型。
	StackedColumn	堆積柱形圖類型。
	StackedColumn100	百分比堆積柱形圖類型。
	Area	面積圖類型。
	SplineArea	樣條面積圖類型。
	StackedArea	堆積面積圖類型。
	StackedArea100	百分比堆積面積圖類型。
	Pie	餅圖類型。
	Doughnut	圓環圖類型。
	Stock	股價圖類型。
	Candlestick	K 線圖類型。
	Range	範圍圖類型。
	SplineRange	樣條範圍圖類型。
	RangeBar	範圍條形圖類型。
	RangeColumn	範圍柱形圖類型。
	Radar	雷達圖類型。
	Polar	極座標圖類型。
	ErrorBar	誤差條形圖類型。
	BoxPlot	盒須圖類型。
	Renko	磚形圖類型。
	ThreeLineBreak	新三值圖類型。
	Kagi	卡吉圖類型。
	PointAndFigure	點數圖類型。
	Funnel	漏斗圖類型。
	Pyramid	棱錐圖類型。

http://msdn.microsoft.com/zh-cn/library/system.web.ui.datavisualization.charting.seriescharttype.aspx

2參考

Series 成員

http://msdn.microsoft.com/zh-cn/library/system.web.ui.datavisualization.charting.series_members.aspx

3源碼下載 

http://files.cnblogs.com/facingwaller/learn2UseRazor3.rar 

之前的是

http://files.cnblogs.com/facingwaller/learn2UseRazor1-2.rar

4尚未完成的問題 

1 themePath的使用。

2 各種圖表的具體使用，有些能兼容。

3 來自同學的提醒，似乎還不能精確控制。 在到處的xml中似乎可以比較精確的控制，

但是由於時間問題，不做深入探究。歡迎大家交流。