2013/04/04

用 C# 建立 Realtime 圖表

最近有需要用到 C# 的畫 Realtime Chart,
於是先找微軟的範例來看(Samples Environment for Microsoft Chart Controls),
順便做個筆記。


加入組件:





繪圖類別
using System.Windows.Forms.DataVisualization.Charting;

public class RealtimeChart
{
    private Chart _chart = null;
    private int chartWidth = 480;
    private int chartHeight = 350;
    private string nameAxisX = "X軸標題";
    private string nameAxisY = "Y軸標題";
        
    public RealtimeChart()
    {
        _chart = new Chart();

        ChartArea ctArea = new ChartArea();
        Legend legend = new Legend();
        Series series = new Series();

        _chart.BackColor = System.Drawing.Color.FromArgb(((int)(((byte)(243)))), ((int)(((byte)(223)))), ((int)(((byte)(193)))));
        _chart.BackGradientStyle = System.Windows.Forms.DataVisualization.Charting.GradientStyle.TopBottom;
        _chart.BorderlineColor = System.Drawing.Color.FromArgb(((int)(((byte)(181)))), ((int)(((byte)(64)))), ((int)(((byte)(1)))));
        _chart.BorderlineDashStyle = System.Windows.Forms.DataVisualization.Charting.ChartDashStyle.Solid;
        _chart.BorderlineWidth = 2;
        _chart.BorderSkin.SkinStyle = System.Windows.Forms.DataVisualization.Charting.BorderSkinStyle.Emboss;
        _chart.Location = new System.Drawing.Point(10, 10);
        _chart.Name = "chart1";
        _chart.Size = new System.Drawing.Size(chartWidth, chartHeight);
        _chart.TabIndex = 1;
        _chart.Dock = System.Windows.Forms.DockStyle.Fill;

        ctArea.Area3DStyle.Inclination = 15;
        ctArea.Area3DStyle.IsClustered = true;
        ctArea.Area3DStyle.IsRightAngleAxes = false;
        ctArea.Area3DStyle.Perspective = 10;
        ctArea.Area3DStyle.Rotation = 10;
        ctArea.Area3DStyle.WallWidth = 0;
        ctArea.AxisX.IsLabelAutoFit = false;
        ctArea.AxisX.LabelStyle.Font = new System.Drawing.Font("Trebuchet MS", 8.25F, System.Drawing.FontStyle.Bold);
        ctArea.AxisX.LineColor = System.Drawing.Color.FromArgb(((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))));
        ctArea.AxisX.MajorGrid.LineColor = System.Drawing.Color.FromArgb(((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))));
        ctArea.AxisX.MinorGrid.LineDashStyle = System.Windows.Forms.DataVisualization.Charting.ChartDashStyle.Dash;
        ctArea.AxisX.Title = nameAxisX;
        ctArea.AxisY.IsLabelAutoFit = false;
        ctArea.AxisY.LabelStyle.Font = new System.Drawing.Font("Trebuchet MS", 8.25F, System.Drawing.FontStyle.Bold);
        ctArea.AxisY.LineColor = System.Drawing.Color.FromArgb(((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))));
        ctArea.AxisY.MajorGrid.LineColor = System.Drawing.Color.FromArgb(((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))));
        ctArea.AxisY.Maximum = 5000D;
        ctArea.AxisY.Minimum = 0D;
        ctArea.AxisY.Title = nameAxisY;
        ctArea.BackColor = System.Drawing.Color.OldLace;
        ctArea.BackGradientStyle = System.Windows.Forms.DataVisualization.Charting.GradientStyle.TopBottom;
        ctArea.BackSecondaryColor = System.Drawing.Color.White;
        ctArea.BorderColor = System.Drawing.Color.FromArgb(((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))));
        ctArea.BorderDashStyle = System.Windows.Forms.DataVisualization.Charting.ChartDashStyle.Solid;
        ctArea.Name = "Default";
        ctArea.ShadowColor = System.Drawing.Color.Transparent;
        _chart.ChartAreas.Add(ctArea);

        legend.BackColor = System.Drawing.Color.Transparent;
        legend.Enabled = false;
        legend.Font = new System.Drawing.Font("Trebuchet MS", 8.25F, System.Drawing.FontStyle.Bold);
        legend.IsTextAutoFit = false;
        legend.Name = "Default";
        _chart.Legends.Add(legend);

        series.BorderColor = System.Drawing.Color.FromArgb(((int)(((byte)(180)))), ((int)(((byte)(26)))), ((int)(((byte)(59)))), ((int)(((byte)(105)))));
        series.ChartArea = "Default";
        series.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line;
        series.Legend = "Default";
        series.Name = "Default";
        _chart.Series.Add(series);
    }

    public Chart GetChart
    {
        get { return _chart; }
    }
}

再用下列方式建立物件
Chart chart1 = new RealtimeChart().GetChart;
this.Controls.Add(chart1);

加入 Timer 元件模擬動態數據來源
private Timer timerRealTimeData;
private Random random = new Random();
private int pointIndex = 0;

private void Form1_Load(object sender, EventArgs e)
{
    timerRealTimeData = new System.Windows.Forms.Timer(this.components);
    timerRealTimeData.Enabled = true;
    timerRealTimeData.Interval = 200;
    timerRealTimeData.Tick += new System.EventHandler(this.timerRealTimeData_Tick);
}

private void timerRealTimeData_Tick(object sender, EventArgs e)
{
    // Define some variables
    int numberOfPointsInChart = 10;
    int numberOfPointsAfterRemoval = 10;
         
    // Simulate adding new data points
    int newX = pointIndex + 1;
    int newY = random.Next(0, 5000);

    chart1.Series[0].Points.AddXY(newX, newY);
    ++pointIndex;

    // Adjust Y & X axis scale
    chart1.ResetAutoValues();
    if (chart1.ChartAreas["Default"].AxisX.Maximum < pointIndex)
    {
        chart1.ChartAreas["Default"].AxisX.Maximum = pointIndex;
    }

    // Keep a constant number of points by removing them from the left
    while (chart1.Series[0].Points.Count > numberOfPointsInChart)
    {
        // Remove data points on the left side
        while (chart1.Series[0].Points.Count > numberOfPointsAfterRemoval)
        {
            chart1.Series[0].Points.RemoveAt(0);
        }

        // Adjust X axis scale
        chart1.ChartAreas["Default"].AxisX.Minimum = pointIndex - numberOfPointsAfterRemoval;
        chart1.ChartAreas["Default"].AxisX.Maximum = chart1.ChartAreas["Default"].AxisX.Minimum + numberOfPointsInChart;
    }

    // Redraw chart
    chart1.Invalidate();
}
原始檔 MyRealtimeChart.7z

2 則留言:

  1. 請問一下,這兩段:
    Chart chart1 = new RealtimeChart().GetChart;
    this.Controls.Add(chart1);
    是要加在哪個部分?

    回覆刪除