WPF 的画图控件Chart应用于 实时显示曲线_wpf chart

1. 属性

层级：
表：chart
线：Series
点：Points（DataPoint）

1.1 图表的各种属性

1.2 线的属性

Series：图表序列->图表集合，就是最终看到的饼图、柱状图、线图、点图等构成的.

   1.ChartArea：图表所属的绘图区域名称

     2.ChartType：图表类型（柱形、饼形、线形、点形、折线图等，有多达几十种之多）

     3.IsValueShownAsLabel：是否显示数据点标签，如果为true，在图表中显示每一个数据值

     4.Label：数据点标签文本

     5.LabelFormat：数据点标签文本格式

     6.LabelAngle：标签字体角度

     7.Legend：当前数据系列（图表）使用的图例名称

     8.Name：数据系列的名称

     9.Palette：数据系列（图表）外观定义

    10.Points：数据点集合，不添加这个，窗体在初使化后什么都没有

    11.XValueMember：横坐标绑定的数据源

    12.XValueType：横坐标数字的类型，默认为auto，即根据传入的数据自动规定类型

    13.YValueMembers：纵坐标绑定的数据源

    14.YValueType：纵坐标数字的类型默认为auto，即根据传入的数据自动规定类型

    15.XAxisType:只是所要使用的坐标轴是主坐标还是副坐标，它有两个取值，Primary和Sencondary

    16.YAxisType：

    17. 映射区（TooTip）：鼠标放在数据点上出现的小提示，建议用代码控制
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

2. 示例

在一个区域里有

        <Grid Name="Simon">

        </Grid>
1
2
3

在C#文件源码：

#region 实时折线图
        public Timer threadTimer { get; private set; }
        public Chart chart= null;
        private List<string> cherry = new List<string>() { "33", "75", "60", "98", "67", "88", "39", "45", "13", "22", "45", "80" };
   
        private List<DateTime> LsTimeRT = new List<DateTime>();
        public void InitTimer()
        {
            threadTimer = new System.Threading.Timer(new TimerCallback(TimerUp), null, 1000, 500);
        }
        private void InitChart()
        {
            //创建一个图标
             this.chart = new Chart();

            //设置图标的宽度和高度
            chart.Width = 580;
            chart.Height = 380;
            chart.Margin = new Thickness(100, 5, 10, 5);
            //是否启用打印和保持图片
            chart.ToolBarEnabled = false;

            //设置图标的属性
            chart.ScrollingEnabled = true;//ccj false;//是否启用或禁用滚动
            chart.View3D = false; //ccj true;//3D效果显示

            //创建一个标题的对象
            Title title = new Title();

            //设置标题的名称
            title.Text = "实时曲线";
            title.Padding = new Thickness(0, 10, 5, 0);

            //向图标添加标题
            chart.Titles.Add(title);

            //初始化一个新的Axis
            Axis xaxis = new Axis();
            //设置Axis的属性
            //图表的X轴坐标按什么来分类，如时分秒
            xaxis.IntervalType = IntervalTypes.Milliseconds;
            //图表的X轴坐标间隔如2,3,20等，单位为xAxis.IntervalType设置的时分秒。
            xaxis.Interval = 2000;
            //设置X轴的时间显示格式为7-10 11：20           
            xaxis.ValueFormatString = "MM秒";
            //给图标添加Axis            
            chart.AxesX.Add(xaxis);

            Axis yAxis = new Axis();
            //设置图标中Y轴的最小值永远为0           
            yAxis.AxisMinimum = 0;
            //设置图表中Y轴的后缀          
            yAxis.Suffix = "斤";
            chart.AxesY.Add(yAxis);
            // 创建一个新的数据线。               
            DataSeries dataSeries = new DataSeries();
            // 设置数据线的格式。               
            dataSeries.LegendText = "樱桃";

            dataSeries.RenderAs = RenderAs.Spline;//折线图

            dataSeries.XValueType = ChartValueTypes.DateTime;

            // 添加数据线到数据序列。                
            chart.Series.Add(dataSeries);

            //将生产的图表增加到Grid，然后通过Grid添加到上层Grid.           
            Grid gr = new Grid();
            gr.Children.Add(chart);
            Simon.Children.Clear();
            Simon.Children.Add(gr);

        }

        private void TimerUp(object state)
        {
            DateTime now = DateTime.Now;
            LsTimeRT.Add(now);
            App.Current.Dispatcher.Invoke((Action)(() =>
            {
                
                this.chart.Series[0].DataPoints.Clear();
                // 设置数据点              
                DataPoint dataPoint;
                int ii = 30;
                if (LsTimeRT.Count < ii)
                {
                    for (int i = 0; i < LsTimeRT.Count; i++)
                    {
                        // 创建一个数据点的实例。                   
                        dataPoint = new DataPoint();
                        // 设置X轴点                    
                        dataPoint.XValue = LsTimeRT[i];
                        //设置Y轴点                   
                        dataPoint.YValue = double.Parse(cherry[i % 12]);
                        dataPoint.MarkerSize = 8;
                        //dataPoint.Tag = tableName.Split('(')[0];
                        //设置数据点颜色                  
                        // dataPoint.Color = new SolidColorBrush(Colors.LightGray);                   
                        dataPoint.MouseLeftButtonDown += new MouseButtonEventHandler(dataPoint_MouseLeftButtonDown);
                        //添加数据点                   
                        this.chart.Series[0].DataPoints.Add(dataPoint);
                    }
                }
                else
                {
                    List<DateTime> llt = new List<DateTime>();
                    for (int i = LsTimeRT.Count - ii; i < LsTimeRT.Count; i++)
                    {
                        // 创建一个数据点的实例。                   
                        dataPoint = new DataPoint();
                        // 设置X轴点                    
                        dataPoint.XValue = LsTimeRT[i];
                        //设置Y轴点                   
                        dataPoint.YValue = double.Parse(cherry[i % 12]);
                        dataPoint.MarkerSize = 8;
                        //dataPoint.Tag = tableName.Split('(')[0];
                        //设置数据点颜色                  
                        // dataPoint.Color = new SolidColorBrush(Colors.LightGray);                   
                        dataPoint.MouseLeftButtonDown += new MouseButtonEventHandler(dataPoint_MouseLeftButtonDown);
                        //添加数据点                   
                        this.chart.Series[0].DataPoints.Add(dataPoint);
                    }



                }
            }));
        }

        private void ButRealTimeSpline_Click(object sender, RoutedEventArgs e)
        {
            Simon.Children.Clear();
            InitChart();
            InitTimer();

        }
        #endregion
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

ButRealTimeSpline_Click ：按钮事件触发
threadTimer ：定时器
TimerUp：定时器回调函数
chart：图
cherry ：数据

结果：

例程