[立体,3D]MS Chart Control 學習手記(一) - 直條圖&橫條圖-CSDN博客

[立体,3D]MS Chart Control 學習手記(一) - 直條圖&橫條圖

客戶希望可以針對資料庫裡面的資料產生出曲線圖、直條圖、橫條圖、立體直條圖、立體橫條圖、圓餅圖、立體圓餅圖

剛聽到真是快吐血，畢竟沒做過，感覺又頗麻煩...

不過問了一下G哥，發現原來微軟收購了一家圖表元件公司(Dundas)

並釋出了一個完全免費的圖表元件「Microsoft Chart Controls 」

稍微看了一下，功能頗強...且官網還可以下載超多範例(這裡)

使用前必須安裝組件，我是使用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 - 使用直條圖&恆條圖

MSChart - 使用直條圖&恆條圖

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