chart控制元件的使用

本文介紹如何使用工具箱裡的chart控制元件，繪製多條曲線。效果圖如下：

1.InitializeChart

在窗體裡新增chart控制元件，然後在屬性裡清空ChartAreas、Legends和Series集合，它們會由下面程式碼動態實現。在窗體建構函式裡，實現InitializeChart和DrawSeries方法。

InitializeChart程式碼如下。

public partial class MainFormBERT : Form
    {
        public MainFormBERT()
        {
            InitializeComponent();
 

            InitializeChart();
            DrawSeries();
        }

         public void InitializeChart()
        {
            #region 設定圖表的屬性
            //圖表的背景色
            chart1.BackColor = Color.FromArgb(211, 223, 240);
            //圖表背景色的漸變方式
            chart1.BackGradientStyle = GradientStyle.None
 
;
            //圖表的邊框顏色、
            chart1.BorderlineColor = Color.FromArgb(26, 59, 105);
            //圖表的邊框線條樣式
            chart1.BorderlineDashStyle = ChartDashStyle.Solid;
            //圖表邊框線條的寬度
            chart1.BorderlineWidth = 2;
            //圖表邊框的面板
            chart1.BorderSkin.SkinStyle = BorderSkinStyle.None
 
;
            #endregion

            #region 設定圖表的Title
            Title title = new Title();
            //標題內容
            title.Text = "BER";
            //標題的字型
            title.Font = new System.Drawing.Font("Microsoft Sans Serif", 12, FontStyle.Regular);
            //標題字型顏色
            //title.ForeColor = Color.FromArgb(26, 59, 105);
            //標題陰影顏色
            //title.ShadowColor = Color.FromArgb(32, 0, 0, 0);
            //標題陰影偏移量
            //title.ShadowOffset = 3;

            chart1.Titles.Add(title);
            #endregion

            #region 設定圖表區屬性
            //圖表區的名字
            ChartArea chartArea = new ChartArea("Default");
            //背景色
            chartArea.BackColor = Color.White;// Color.FromArgb(64, 165, 191, 228);
            //背景漸變方式
            chartArea.BackGradientStyle = GradientStyle.None;
            //漸變和陰影的輔助背景色
            chartArea.BackSecondaryColor = Color.White;
            //邊框顏色
            chartArea.BorderColor = Color.Blue;
            //邊框線條寬度
            chartArea.BorderWidth = 2;
            //邊框線條樣式
            chartArea.BorderDashStyle = ChartDashStyle.Solid;
            //陰影顏色
            //chartArea.ShadowColor = Color.Transparent;

            //設定X軸和Y軸線條的顏色和寬度
            chartArea.AxisX.LineColor = Color.FromArgb(64, 64, 64, 64);
            chartArea.AxisX.LineWidth = 1;
            chartArea.AxisY.LineColor = Color.FromArgb(64, 64, 64, 64);
            chartArea.AxisY.LineWidth = 1;

            //設定X軸和Y軸的標題
            //chartArea.AxisX.Title = "time";
            //chartArea.AxisY.Title = "count";
            //chartArea.AxisX.TitleFont = new System.Drawing.Font("Microsoft Sans Serif", 10, FontStyle.Regular);
            //chartArea.AxisY.TitleFont = new System.Drawing.Font("Microsoft Sans Serif", 10, FontStyle.Regular);

            //設定圖表區網格橫縱線條的顏色和寬度
            chartArea.AxisX.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);
            chartArea.AxisX.MajorGrid.LineWidth = 1;
            chartArea.AxisY.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);
            chartArea.AxisY.MajorGrid.LineWidth = 1;          

            chart1.ChartAreas.Add(chartArea);
            #endregion

            #region 圖例及圖例的位置
            Legend legend = new Legend();
            legend.Alignment = StringAlignment.Center;
            legend.Docking = Docking.Bottom;
            legend.BackColor = Color.Transparent;

            this.chart1.Legends.Add(legend);
            #endregion
        }
  }

2.設定曲線樣式

型別、顏色和寬度等。

private Series SetSeriesStyle(int i)
        {
            Series series = new Series(string.Format("Ch{0}", i + 1));

            //Series的型別
            series.ChartType = SeriesChartType.Line;
            //Series的邊框顏色
            series.BorderColor = Color.FromArgb(180, 26, 59, 105);
            //線條寬度
            series.BorderWidth = 3;
            //線條陰影顏色
            //series.ShadowColor = Color.Black;
            //陰影寬度
            //series.ShadowOffset = 2;
            //是否顯示資料說明
            series.IsVisibleInLegend = true;
            //線條上資料點上是否有資料顯示
            series.IsValueShownAsLabel = false;
            //線條上的資料點標誌型別
            series.MarkerStyle = MarkerStyle.None;
            //線條資料點的大小
            //series.MarkerSize = 8;
            //線條顏色
            switch (i)
            {
                case 0:
                    series.Color = Color.FromArgb(220, 65, 140, 240);
                    break;
                case 1:
                    series.Color = Color.FromArgb(220, 224, 64, 10);
                    break;
                case 2:
                    series.Color = Color.FromArgb(220, 120, 150, 20);
                    break;
                case 3:
                    series.Color = Color.FromArgb(220, 12, 128, 232);
                    break;
            }
            return series;
        }

3.繪製曲線

從datatable裡獲取資料，繪製四條曲線。

//繪製曲線
     private void DrawSeries()
        {
            dt = new TestDataTable();
            dt.CreateTable();

            for (int i = 0; i < 4; i++)
            {
                Series series = this.SetSeriesStyle(i);
                DataRow[] foundRows;
                string expression = "Ch = " + i;
                foundRows = dt.Select(expression);
                foreach (DataRow row in foundRows)
                {
                    series.Points.AddXY(row[0], row[2]);
                }
                this.chart1.Series.Add(series);
            }
        }

4.顯示或隱藏曲線

根據checkbox的狀態顯示和隱藏這四條曲線。

//顯示隱藏曲線
     private void DisOrPlaySeries(int i)
        {
            if (checkBox[i].Checked)
            {
                DataRow[] foundRows;
                string expression = "Ch = " + i;
                foundRows = dt.Select(expression);
                foreach (DataRow row in foundRows)
                {
                    this.chart1.Series[i].Points.AddXY(row[0], row[2]);
                }
            }
            else
            {
                this.chart1.Series[i].Points.Clear();
            }
        }