C#：winform使用chart控件绘制折线图 时间轴可缩放

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

已填

Chart坐标轴横轴为时间，纵轴是数值

如果只是一次性绘图，那么遍历一遍数据即可

如果想连续绘制（比如按照时间更新绘制），就需要一个Timer控件来更新绘图的数据。

以下为项目代码：

GUI界面添加一个Chart和一个timer即可

using System;using System.Collections.Generic;using ponentModel;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);}}}

上测试图：

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对象，省去判断，你们也可以把它直接换成chart1if (((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;}}}

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

chart1.MouseWheel += new MouseEventHandler(myMouseWheel);

3.运行试试看

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

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

using System;using System.Collections.Generic;using ponentModel;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;}}}}}