利用MsChart控件繪製多曲線圖表

時間 2020-09-20

標籤利用 mschart 控件繪製曲線圖表简体版

原文原文鏈接

在.Net4.0框架中，微軟已經將Mschart控件集成了進來，之前一直在web下面用過，原來winform下的Mschart控件更加簡單更加方便，今天咱們用mschart繪製一個多曲線圖，發現MsChart 的顯示效果仍是不錯的，話很少說，直接上效果圖：html

代碼以下，供你們參考：web

public partial class FrmMain : Form
    {
        public FrmMain()
        {
            InitializeComponent();
            InitializeChart();
            this.Load += new EventHandler(FrmMain_Load);
            this.myChart.GetToolTipText += new EventHandler<ToolTipEventArgs>(myChart_GetToolTipText);
        }

        void FrmMain_Load(object sender, EventArgs e)
        {
            float[][] data = new float[3][];
            //第一條數據
            data[0] = new float[10] { 1.3f, 2.5f, 2.1f, 3.3f, 2.8f, 3.9f, 4.3f, 3.6f, 4.2f, 3.6f };
            //第二條數據
            data[1] = new float[12] { -2f, -1.3f, 0.1f, 0.5f, -1.5f, 0.7f, 1f, 1.4f, 1.9f, 2f, 2.6f, 3.1f };
            //第三條數據
            data[2] = new float[10] { 7.8f, 9.2f, 6.5f, 8.3f, 9.0f, 5.9f, 6.3f, 7.2f, 8.8f, 9.8f };

            for (int i = 0; i < data.Length; i++)
            {
                //橫座標時間
                DateTime dt = DateTime.Now.Date;
                Series series = this.SetSeriesStyle(i);
                for (int j = 0; j < data[i].Length; j++)
                {
                    series.Points.AddXY(dt, data[i][j]);
                    dt = dt.AddDays(1);
                }
                this.myChart.Series.Add(series);
            }
        }

        private void myChart_GetToolTipText(object sender, ToolTipEventArgs e)
        {
            if (e.HitTestResult.ChartElementType == ChartElementType.DataPoint)
            {
                int i = e.HitTestResult.PointIndex;
                DataPoint dp = e.HitTestResult.Series.Points[i];
                e.Text = string.Format("時間:{0};數值:{1:F1} ", DateTime.FromOADate(dp.XValue),dp.YValues[0]);
            }
        }

        /// <summary>
        /// 初始化Char控件樣式
        /// </summary>
        public void InitializeChart()
        {
            #region 設置圖表的屬性
            //圖表的背景色
            myChart.BackColor = Color.FromArgb(211, 223, 240);
            //圖表背景色的漸變方式
            myChart.BackGradientStyle = GradientStyle.TopBottom;
            //圖表的邊框顏色、
            myChart.BorderlineColor = Color.FromArgb(26, 59, 105);
            //圖表的邊框線條樣式
            myChart.BorderlineDashStyle = ChartDashStyle.Solid;
            //圖表邊框線條的寬度
            myChart.BorderlineWidth = 2;
            //圖表邊框的皮膚
            myChart.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
            #endregion

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

            myChart.Titles.Add(title);
            #endregion

            #region 設置圖表區屬性
            //圖表區的名字
            ChartArea chartArea = new ChartArea("Default");
            //背景色
            chartArea.BackColor = Color.FromArgb(64, 165, 191, 228);
            //背景漸變方式
            chartArea.BackGradientStyle = GradientStyle.TopBottom;
            //漸變和陰影的輔助背景色
            chartArea.BackSecondaryColor = Color.White;
            //邊框顏色
            chartArea.BorderColor = Color.FromArgb(64, 64, 64, 64);
            //陰影顏色
            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 = "橫座標標題";
            chartArea.AxisY.Title = "縱座標標題";

            //設置圖表區網格橫縱線條的顏色和寬度
            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;

            myChart.ChartAreas.Add(chartArea);
            #endregion

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

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

        //設置Series樣式
        private Series SetSeriesStyle(int i)
        {
            Series series = new Series(string.Format("第{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.Circle;
            //線條數據點的大小
            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;
            }
            return series;
        }
    }