1. 程式人生 > >C#使用chart繪製實時折線圖,波形圖

C#使用chart繪製實時折線圖,波形圖

採用VS自帶的Chart圖表控制元件,製作實時動態顯示的折線圖,和波形圖

涉及知識點:

  • Chart 控制元件,功能強大,可以繪製柱狀圖,折線圖,波形圖,餅狀圖,大大簡化了對圖的開發與定製。

Chart控制元件的相關概念:

  • ChartArea,表示圖表區域,一個Chart可以繪製多個ChartArea,重疊在一起。
  • Series ,表示資料序列,每個ChartArea可以有多個數據線。即,Series屬於ChartArea.
  • AxisX,AxisY,表示主座標軸,每一個ChartArea都有對應的座標軸,包括主座標軸,輔座標軸
  • Queue集合,表示先進先出的集合。

主要有兩個方法:

  • Dequeue() 表示移除並返回位於 System.Collections.Generic.Queue<T> 開始處的物件。
  • Enqueue() 表示將物件新增到 System.Collections.Generic.Queue<T> 的結尾處。
  • Timer ,定時器,定時之行相應的功能,更新資料,重新整理圖表。

【折線圖,是取[0,100]之間的隨即數進行填充】:

【波形圖,是取正玄值,並放大50倍,然後上移50】

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Windows.Forms.DataVisualization.Charting;

namespace WindowsFormsApplication1
{
    public partial class RealChart : Form
    {
        private Queue<double> dataQueue = new Queue<double>(100);

        private int curValue = 0;

        private int num = 5;//每次刪除增加幾個點

        public RealChart()
        {
            InitializeComponent();
        }

        /// <summary>
        /// 初始化事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void btnInit_Click(object sender, EventArgs e)
        {
            InitChart();
        }

        /// <summary>
        /// 開始事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void btnStart_Click(object sender, EventArgs e)
        {
            this.timer1.Start();
        } 
        
        /// <summary>
        /// 停止事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void btnStop_Click(object sender, EventArgs e)
        {
            this.timer1.Stop();
        }

        /// <summary>
        /// 定時器事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void timer1_Tick(object sender, EventArgs e)
        {
            UpdateQueueValue();
            this.chart1.Series[0].Points.Clear();
            for(int i=0;i<dataQueue.Count;i++){
                this.chart1.Series[0].Points.AddXY((i+1), dataQueue.ElementAt(i));
            }
        } 
        
        /// <summary>
        /// 初始化圖表
        /// </summary>
        private void InitChart() {
            //定義圖表區域
            this.chart1.ChartAreas.Clear();
            ChartArea chartArea1 = new ChartArea("C1");
            this.chart1.ChartAreas.Add(chartArea1);
            //定義儲存和顯示點的容器
            this.chart1.Series.Clear();
            Series series1 = new Series("S1");
            series1.ChartArea = "C1";
            this.chart1.Series.Add(series1);
            //設定圖表顯示樣式
            this.chart1.ChartAreas[0].AxisY.Minimum = 0;
            this.chart1.ChartAreas[0].AxisY.Maximum =100;
            this.chart1.ChartAreas[0].AxisX.Interval = 5;
            this.chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = System.Drawing.Color.Silver;
            this.chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = System.Drawing.Color.Silver;
            //設定標題
            this.chart1.Titles.Clear();
            this.chart1.Titles.Add("S01");
            this.chart1.Titles[0].Text = "XXX顯示";
            this.chart1.Titles[0].ForeColor = Color.RoyalBlue;
            this.chart1.Titles[0].Font = new System.Drawing.Font("Microsoft Sans Serif", 12F);
            //設定圖表顯示樣式
            this.chart1.Series[0].Color = Color.Red;
            if (rb1.Checked)
            {
                this.chart1.Titles[0].Text =string.Format( "XXX {0} 顯示",rb1.Text);
                this.chart1.Series[0].ChartType = SeriesChartType.Line;
            }
            if (rb2.Checked) {
                this.chart1.Titles[0].Text = string.Format("XXX {0} 顯示", rb2.Text);
                this.chart1.Series[0].ChartType = SeriesChartType.Spline;
            }
            this.chart1.Series[0].Points.Clear();
        }
        
        //更新佇列中的值
        private void UpdateQueueValue() {
            
            if (dataQueue.Count > 100) {
                //先出列
                for (int i = 0; i < num; i++)
                {
                    dataQueue.Dequeue();
                }
            }
            if (rb1.Checked)
            {
                Random r = new Random();
                for (int i = 0; i < num; i++)
                {
                    dataQueue.Enqueue(r.Next(0, 100));
                }
            }
            if (rb2.Checked) {
                for (int i = 0; i < num; i++)
                {
                    //對curValue只取[0,360]之間的值
                    curValue = curValue % 360;
                    //對得到的正玄值,放大50倍,並上移50
                    dataQueue.Enqueue((50*Math.Sin(curValue*Math.PI / 180))+50);
                    curValue=curValue+10;
                }
            }
        }
    }
}

關於定時器Timer:

說明:表示在相同的時間間隔,引發使用者自定義的事情 。實現使用者需要的功能。本例中是用來定時更新佇列中的資料,並重新整理圖表。

常用說明:

  1. Interval 時間間隔,以毫秒為單位,本例是300毫秒。
  2. Tick 定時觸發的事件,本例對應timer1_Tick事件方法。
  3. Start(),Stop() 表示定時器的啟動和停止。Enabled 表示定時器是否啟用,預設值為 false,需要手動設定為true。