針對資料庫裡面的資料產生出曲線圖、直條圖、橫條圖、立體直條圖、立體橫條圖、圓餅圖、立體圓餅圖

使用前必須安裝組件，我是使用VS2010，忘了當初有沒有裝(半個月前的事...)

Microsoft Chart Controls for Microsoft .NET Framework 3.5

Microsoft Chart Controls for Microsoft .NET Framework 3.5 語言套件

Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008 (裝完後可以在工具箱拖曳使用)

Microsoft Chart Controls for .NET Framework Documentation (安裝及使用說明文件)

 

MSChart - 使用直條圖&恆條圖

view source

 

print?

01	using System.Web.UI.DataVisualization.Charting;

02	using System.Drawing;

03

04	namespace Chart.AJAX

05

{

06	public partial class Export_AJAX : System.Web.UI.Page

07

{

08	void CreateChart()

09

{

10	string[] xValues = { "數值1", "數值2" };

11	string[] titleArr = {"活動1", "活動2"};

12	int[] yValues = {269000, 94};

13	int[] yValues2 = {120300, 116};

14

15	//ChartAreas,Series,Legends 基本設定--------------------------------------------------

16	Chart Chart1 = new Chart();

17	Chart1.ChartAreas.Add("ChartArea1"); //圖表區域集合

18	Chart1.Series.Add("Series1"); //數據序列集合

19	Chart1.Series.Add("Series2");

20	Chart1.Legends.Add("Legends1"); //圖例集合

21

22	//設定 Chart

23	Chart1.Width = 700;

24	Chart1.Height = 400;

25	Title title = new Title();

26	title.Text = "長條圖";

27	title.Alignment = ContentAlignment.MiddleCenter;

28	title.Font = new System.Drawing.Font("Trebuchet MS", 14F, FontStyle.Bold);

29	Chart1.Titles.Add(title);

30

31	//設定 ChartArea----------------------------------------------------------------------

32	Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true; //3D效果

33	Chart1.ChartAreas["ChartArea1"].Area3DStyle.IsClustered = true; //並排顯示

34	Chart1.ChartAreas["ChartArea1"].Area3DStyle.Rotation = 40; //垂直角度

35	Chart1.ChartAreas["ChartArea1"].Area3DStyle.Inclination = 50; //水平角度

36	Chart1.ChartAreas["ChartArea1"].Area3DStyle.PointDepth = 30; //數據條深度

37	Chart1.ChartAreas["ChartArea1"].Area3DStyle.WallWidth = 0; //外牆寬度

38	Chart1.ChartAreas["ChartArea1"].Area3DStyle.LightStyle = LightStyle.Realistic; //光源

39	Chart1.ChartAreas["ChartArea1"].BackColor = Color.FromArgb(240, 240, 240); //背景色

40	Chart1.ChartAreas["ChartArea1"].AxisX2.Enabled = AxisEnabled.False; //隱藏 X2 標示

41	Chart1.ChartAreas["ChartArea1"].AxisY2.Enabled = AxisEnabled.False; //隱藏 Y2 標示

42	Chart1.ChartAreas["ChartArea1"].AxisY2.MajorGrid.Enabled = false;   //隱藏 Y2 軸線

43

//Y 軸線顏色

44	Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.LineColor = Color.FromArgb(150, 150, 150);

45

//X 軸線顏色

46	Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.LineColor = Color.FromArgb(150, 150, 150);

47	Chart1.ChartAreas["ChartArea1"].AxisY.LabelStyle.Format = "#,###";

48	//Chart1.ChartAreas["ChartArea1"].AxisY2.Maximum = 160;

49	//Chart1.ChartAreas["ChartArea1"].AxisY2.Interval = 20;

50

51	//設定 Legends------------------------------------------------------------------------

52	Chart1.Legends["Legends1"].DockedToChartArea = "ChartArea1"; //顯示在圖表內

53	//Chart1.Legends["Legends1"].Docking = Docking.Bottom; //自訂顯示位置

54	Chart1.Legends["Legends1"].BackColor = Color.FromArgb(235, 235, 235); //背景色

55

//斜線背景

56	Chart1.Legends["Legends1"].BackHatchStyle = ChartHatchStyle.DarkDownwardDiagonal;

57	Chart1.Legends["Legends1"].BorderWidth = 1;

58	Chart1.Legends["Legends1"].BorderColor = Color.FromArgb(200, 200, 200);

59

60	//設定 Series-----------------------------------------------------------------------

61	Chart1.Series["Series1"].ChartType = SeriesChartType.Column; //直條圖

62	//Chart1.Series["Series1"].ChartType = SeriesChartType.Bar; //橫條圖

63	Chart1.Series["Series1"].Points.DataBindXY(xValues, yValues);

64	Chart1.Series["Series1"].Legend = "Legends1";

65	Chart1.Series["Series1"].LegendText = titleArr[0];

66	Chart1.Series["Series1"].LabelFormat = "#,###"; //金錢格式

67	Chart1.Series["Series1"].MarkerSize = 8; //Label 範圍大小

68	Chart1.Series["Series1"].LabelForeColor = Color.FromArgb(0, 90, 255); //字體顏色

69

//字體設定

70	Chart1.Series["Series1"].Font = new System.Drawing.Font("Trebuchet MS", 10, System.Drawing.FontStyle.Bold);

71	//Label 背景色

72	Chart1.Series["Series1"].LabelBackColor = Color.FromArgb(150, 255, 255, 255);

73	Chart1.Series["Series1"].Color = Color.FromArgb(240, 65, 140, 240); //背景色

74	Chart1.Series["Series1"].IsValueShownAsLabel = true; // Show data points labels

75

76	Chart1.Series["Series2"].Points.DataBindXY(xValues, yValues2);

77	Chart1.Series["Series2"].Legend = "Legends1";

78	Chart1.Series["Series2"].LegendText = titleArr[1];

79	Chart1.Series["Series2"].LabelFormat = "#,###"; //金錢格式

80	Chart1.Series["Series2"].MarkerSize = 8; //Label 範圍大小

81	Chart1.Series["Series2"].LabelForeColor = Color.FromArgb(255, 103, 0);

82	Chart1.Series["Series2"].Font = new System.Drawing.Font("Trebuchet MS", 10, FontStyle.Bold);

83	Chart1.Series["Series2"].LabelBackColor = Color.FromArgb(150, 255, 255, 255);

84	Chart1.Series["Series2"].Color = Color.FromArgb(240, 252, 180, 65); //背景色

85	Chart1.Series["Series2"].IsValueShownAsLabel = true; //顯示數據

86	Page.Controls.Add(Chart1);

87

88	//Data Table

89	string output = "..."; //output data table

90	Label label = new Label();

91	label.Text = output;

92	Page.Controls.Add(label);

93

}

94

}

95

}

 

跑出來的圖差不多就長這樣，其中 Series1 是藍色的，Series2 是橘色

 

直條圖跟橫條圖其實只要改變 SeriesChartType.Column 或 SeriesChartType.Bar 就好了，其他東西都不用做更動

只是裡面有一個 Chart1.Series["Series1"].LabelFormat = "#,###"; //金錢格式 

改成橫條圖時會出錯，可能設定的格式不編準之類的？有時間在摸索

 

另外筆記一下：

可以看到裡面有這些宣告

view source

 

print?

1	Chart Chart1 = new Chart();

2	Chart1.ChartAreas.Add("ChartArea1"); //圖表區域集合

3	Chart1.Series.Add("Series1"); //數據序列集合

4	Chart1.Series.Add("Series2");

5	Chart1.Legends.Add("Legends1"); //圖例集合

很多範例都可以看到  Chart1.Series["Default"] 

一開始接觸看不太懂，自己在 .cs 新增了 Chart1.Series.Add("Series1");

然後設確定用 Chart1.Series["Default"] ...，導致一直出現找不到 Default 之類的錯誤

因為範例大多都先在 .aspx 拉好，順便設定好，所以就亂用

後來才發現原來 Default 是自己命名的...

所以 Chart1.Series.Add("Series1"); ，就必須 Chart1.Series["Series1"]....

還有 Chart1.Series["Series1"].ChartType ...　等於　Chart1.Series[0].ChartType ...

一開始宣告一定要命名，之後要用 Chart1.Series["第n個Series"] 還是 Chart1.Series[n] 都可以

當然 ChartAreas、Legends 是一樣的道理

 

       

參考資料：

Samples Environment for Microsoft Chart Controls  http://archive.msdn.microsoft.com/mschart