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

最新推荐文章于 2024-08-10 16:30:00 发布

BigSmallpipi

最新推荐文章于 2024-08-10 16:30:00 发布

阅读量1.7w

点赞数 27

分类专栏： C# 文章标签： chart winform C# 折线图

本文链接：https://blog.csdn.net/YangZuo_Chester/article/details/89227628

版权

C# 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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);
        }

    }
}

上测试图：

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;
                }
            }
        }

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

chart1.MouseWheel += new MouseEventHandler(myMouseWheel);

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;
                }

            }
        }
    }

}