C#：winform使用chart控件绘制折线图，时间轴可缩放_winform的chart控件将时间作为横坐标的值

作者：Monodyee | 2024-03-20 05:26:47

踩

winform的chart控件将时间作为横坐标的值

最近做的一个项目里用到这部分打算记录下来挖个坑
已填

Chart坐标轴横轴为时间，纵轴是数值
如果只是一次性绘图，那么遍历一遍数据即可
如果想连续绘制（比如按照时间更新绘制），就需要一个Timer控件来更新绘图的数据。

以下为项目代码：
GUI界面添加一个Chart和一个timer即可

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

namespace chartForTest
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            Init_Chart();//初始化chart组件有关属性
            timer1.Interval = 1000;//timer1用来更新图像,每秒增加一个点
            timer1.Start();//窗口初始化完成即开始绘制
        }
        private void Init_Chart()
        {
            #region chart1  
            chart1.Series[0].IsValueShownAsLabel = true;//让点集0在图像上显示数值
            chart1.Series[0].SmartLabelStyle.Enabled = true;
            chart1.Series[0].XValueType = ChartValueType.DateTime;//坐标轴type改为时间

            //去掉滚动条的按钮
            chart1.ChartAreas[0].AxisX.ScrollBar.ButtonStyle = ScrollBarButtonStyles.None;
            chart1.ChartAreas[0].AxisX.ScrollBar.IsPositionedInside = false;
            chart1.ChartAreas[0].AxisX.ScrollBar.Size = 20;
            chart1.ChartAreas[0].AxisX.ScaleView.MinSizeType = DateTimeIntervalType.Seconds;
            chart1.ChartAreas[0].AxisX.ScaleView.SizeType = DateTimeIntervalType.Seconds;
            chart1.ChartAreas[0].AxisX.ScaleView.Size = 20;
            chart1.ChartAreas[0].AxisX.ScaleView.MinSize = 15;
            chart1.ChartAreas[0].AxisX.ScaleView.SmallScrollMinSize = 1;
            chart1.ChartAreas[0].AxisX.ScaleView.SmallScrollMinSizeType = DateTimeIntervalType.Seconds;
            chart1.ChartAreas[0].AxisX.IntervalType = DateTimeIntervalType.Seconds;
            //这个interval可以用来修改显示间隔
            chart1.ChartAreas[0].AxisX.Interval = DateTime.Parse("00:00:01").Second;
            chart1.ChartAreas[0].AxisX.TitleAlignment = StringAlignment.Near;
            chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = true;
            chart1.ChartAreas[0].AxisX.MajorGrid.LineWidth = 1;
            chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = Color.LightGray;
            //显示格式为时:分:秒
            chart1.ChartAreas[0].AxisX.LabelStyle.Format = "HH:mm:ss";
            chart1.ChartAreas[0].AxisY.IntervalAutoMode = IntervalAutoMode.VariableCount;
            chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.LightGray;
            #endregion
        }


        private void timer1_Tick(object sender, EventArgs e)
        {
            //让滚动条滚动到最新位置
            this.chart1.ChartAreas[0].AxisX.ScaleView.Scroll(ScrollType.Last);
            string now = DateTime.Now.ToLongTimeString();
            //转换time的格式用于输出
            DateTime time = DateTime.Parse(now);
            //在点集0(serials[0])中加入新的点XY
            //TIP:如果你使用数组存放要绘制的点,每次绘图从上一次绘制结束的位置开始即可
            //不需要每次画图都从第一个点开始绘制
            this.chart1.Series[0].Points.AddXY(time, DateTime.Now.Second);
        }

    }
}

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

上测试图：

PLUS：如果你还想让Chart实现时间坐标轴的缩放怎么做？

方便起见，我这里使用滚轮上下滑动

1.需要一个修改坐标轴间隔的事件

		//记录当前的缩放位置,便于控制范围
        private int IntervalNow = 0;
        //可以使用代码控制,也可以像我这样使用固定的数组(其实这样更方便)
        private string[] deltas = new string[] {"00:00:01",
                                                "00:00:10",
                                                "00:00:30",
                                                "00:01:00",
                                                "00:05:00",
                                                "00:10:00",
                                                "00:30:00",
                                                "00:45:00",
                                                "01:00:00"};
		void myMouseWheel(object sender, MouseEventArgs e)
        {
            //if(sender == ch)
            if (e.Delta > 0)
            {//放大
            	//由于之前项目有不止一个Chart，所以我这里使用了(Chart)(sender)来获取触发事件的chart对象，省去判断，你们也可以把它直接换成chart1
                if (((Chart)(sender)).ChartAreas[0].AxisX.ScaleView.Size >= 0.5)
                    ((Chart)(sender)).ChartAreas[0].AxisX.ScaleView.Size = ((Chart)(sender)).ChartAreas[0].AxisX.ScaleView.Size * 0.5;

                if (Convert.ToInt32(((Chart)(sender)).ChartAreas[0].AxisX.ScaleView.Size) >= 20)
                {
                    --IntervalNow;
                    if (IntervalNow < 0)
                        IntervalNow = 0;

                    ((Chart)(sender)).ChartAreas[0].AxisX.Interval = DateTime.Parse(deltas[IntervalNow]).Second;

                }
                else
                {
                    IntervalNow = 0;
                    ((Chart)(sender)).ChartAreas[0].AxisX.Interval = DateTime.Parse(deltas[IntervalNow]).Second;
                }

            }
            else
            {
                if (((Chart)(sender)).ChartAreas[0].AxisX.ScaleView.Size <= 100000)
                    ((Chart)(sender)).ChartAreas[0].AxisX.ScaleView.Size = ((Chart)(sender)).ChartAreas[0].AxisX.ScaleView.Size * 2;

                if (((Chart)(sender)).ChartAreas[0].AxisX.ScaleView.Size >= 20)
                {
                    ++IntervalNow;
                    if (IntervalNow >= 9)
                        IntervalNow = 8;

                    ((Chart)(sender)).ChartAreas[0].AxisX.Interval = DateTime.Parse(deltas[IntervalNow]).Second;
                }
                else
                {
                    IntervalNow = 0;
                    ((Chart)(sender)).ChartAreas[0].AxisX.Interval = DateTime.Parse(deltas[IntervalNow]).Second;
                }
            }
        }
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

2.将Chart与缩放事件关联起来

chart1.MouseWheel += new MouseEventHandler(myMouseWheel);
1

3.运行试试看

在这里插入图片描述

最后附上带缩放控制的完整代码：

GUI界面需要的仍只是添加一个Chart和Timer即可（name分别为chart1和timer1）

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

namespace chartForTest
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            Init_Chart();//初始化chart组件有关属性
            timer1.Interval = 1000;//timer1用来更新图像,每秒增加一个点
            timer1.Start();//窗口初始化完成即开始绘制
            chart1.MouseWheel += new MouseEventHandler(myMouseWheel);
        }
        private void Init_Chart()
        {
            #region chart1  
            chart1.Series[0].IsValueShownAsLabel = true;//让点集0在图像上显示数值
            chart1.Series[0].SmartLabelStyle.Enabled = true;
            chart1.Series[0].XValueType = ChartValueType.DateTime;//坐标轴type改为时间

            //去掉滚动条的按钮
            chart1.ChartAreas[0].AxisX.ScrollBar.ButtonStyle = ScrollBarButtonStyles.None;
            chart1.ChartAreas[0].AxisX.ScrollBar.IsPositionedInside = false;
            chart1.ChartAreas[0].AxisX.ScrollBar.Size = 20;
            chart1.ChartAreas[0].AxisX.ScaleView.MinSizeType = DateTimeIntervalType.Seconds;
            chart1.ChartAreas[0].AxisX.ScaleView.SizeType = DateTimeIntervalType.Seconds;
            chart1.ChartAreas[0].AxisX.ScaleView.Size = 20;
            chart1.ChartAreas[0].AxisX.ScaleView.MinSize = 15;
            chart1.ChartAreas[0].AxisX.ScaleView.SmallScrollMinSize = 1;
            chart1.ChartAreas[0].AxisX.ScaleView.SmallScrollMinSizeType = DateTimeIntervalType.Seconds;
            chart1.ChartAreas[0].AxisX.IntervalType = DateTimeIntervalType.Seconds;
            //这个interval可以用来修改显示间隔
            chart1.ChartAreas[0].AxisX.Interval = DateTime.Parse("00:00:01").Second;
            chart1.ChartAreas[0].AxisX.TitleAlignment = StringAlignment.Near;
            chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = true;
            chart1.ChartAreas[0].AxisX.MajorGrid.LineWidth = 1;
            chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = Color.LightGray;
            //显示格式为时:分:秒
            chart1.ChartAreas[0].AxisX.LabelStyle.Format = "HH:mm:ss";
            chart1.ChartAreas[0].AxisY.IntervalAutoMode = IntervalAutoMode.VariableCount;
            chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.LightGray;
            #endregion
        }


        private void timer1_Tick(object sender, EventArgs e)
        {
            //让滚动条滚动到最新位置
            this.chart1.ChartAreas[0].AxisX.ScaleView.Scroll(ScrollType.Last);
            string now = DateTime.Now.ToLongTimeString();
            //转换time的格式用于输出
            DateTime time = DateTime.Parse(now);
            //在点集0(serials[0])中加入新的点XY
            //TIP:如果你使用数组存放要绘制的点,每次绘图从上一次绘制结束的位置开始即可
            //不需要每次画图都从第一个点开始绘制
            this.chart1.Series[0].Points.AddXY(time, DateTime.Now.Second);
        }

        //记录当前的缩放位置,便于控制范围
        private int IntervalNow = 0;
        //可以使用代码控制,也可以像我这样使用固定的数组(其实这样更方便)
        private string[] deltas = new string[] {"00:00:01",
                                                "00:00:10",
                                                "00:00:30",
                                                "00:01:00",
                                                "00:05:00",
                                                "00:10:00",
                                                "00:30:00",
                                                "00:45:00",
                                                "01:00:00"};
        void myMouseWheel(object sender, MouseEventArgs e)
        {
            if (e.Delta > 0)
            {//放大
                if (((Chart)(sender)).ChartAreas[0].AxisX.ScaleView.Size >= 0.5)
                    ((Chart)(sender)).ChartAreas[0].AxisX.ScaleView.Size = ((Chart)(sender)).ChartAreas[0].AxisX.ScaleView.Size * 0.5;

                if (Convert.ToInt32(((Chart)(sender)).ChartAreas[0].AxisX.ScaleView.Size) >= 20)
                {
                    --IntervalNow;
                    if (IntervalNow < 0)
                        IntervalNow = 0;

                    ((Chart)(sender)).ChartAreas[0].AxisX.Interval = DateTime.Parse(deltas[IntervalNow]).Second;

                }
                else
                {
                    IntervalNow = 0;
                    ((Chart)(sender)).ChartAreas[0].AxisX.Interval = DateTime.Parse(deltas[IntervalNow]).Second;
                }

            }
            else
            {
                if (((Chart)(sender)).ChartAreas[0].AxisX.ScaleView.Size <= 100000)
                    ((Chart)(sender)).ChartAreas[0].AxisX.ScaleView.Size = ((Chart)(sender)).ChartAreas[0].AxisX.ScaleView.Size * 2;

                if (((Chart)(sender)).ChartAreas[0].AxisX.ScaleView.Size >= 20)
                {
                    ++IntervalNow;
                    if (IntervalNow >= 9)
                        IntervalNow = 8;

                    ((Chart)(sender)).ChartAreas[0].AxisX.Interval = DateTime.Parse(deltas[IntervalNow]).Second;
                }
                else
                {
                    IntervalNow = 0;
                    ((Chart)(sender)).ChartAreas[0].AxisX.Interval = DateTime.Parse(deltas[IntervalNow]).Second;
                }

            }
        }
    }

}

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/271043

C#：winform使用chart控件绘制折线图，时间轴可缩放_winform的chart控件将时间作为横坐标的值

上测试图： PLUS：如果你还想让Chart实现时间坐标轴的缩放怎么做？

最后附上带缩放控制的完整代码：

上测试图：

PLUS：如果你还想让Chart实现时间坐标轴的缩放怎么做？