携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情

前言

前面我们对Chart的界面的时间轴做了一个设计，不知道的同学可以看我之前的文章，今天这篇文章是对上一篇文章的扩展，前面我们对Chart做了数据滚动效果，发现它自带的系统滚动条又大又丑，非常的不好看，实在让我们看不下去，今天这篇文章就是学一下如何对Chart的滚动条去设计的好看一点，创作不易，点赞关注评论收藏，你的点赞是我创作的动力，也是我学习的方向谢谢啦！！！

一、页面设计

界面的设计和上一篇文章是一样的我们就是在上一篇文章的基础上进行设计的，对界面的设计，使用timer定时器按照每秒循环生成随机数添加进Chart里面，使我们实现每秒添加值，形成曲线运动，开始按钮是对于定时器的控制，然后我们将代码复制到我们的项目中对于chart的折线图设置。

上面是上面文章关于X轴为时间轴的代码，下面的是关于我们对于Chart滚动条的设置的代码：

二、效果展示

我们先看不设置滚动条的样式，看看自带的滚动条，我们会发现自带的滚动条，又大又不好看，给人一种老旧的样式，而我们设置之后的滚动条比较好看，又细，颜色又简约，满满的小清新的感觉，给人的观感都不一样，难怪有些公司做到项目要请UI设计，哈哈哈！！！

三、代码逻辑

我们可以直接粘贴代码就可以对Chart的滚动条的设置，直接放到你需要的Chart控件里面，注意：Chart控件的滚动条肯定是基于滚动条是True的，如果你的滚动条都不打开肯定是空话。哈哈哈哈。 chart1.ChartAreas[0].AxisX.ScrollBar.Enabled = true;这条语句就是将滚动条打开。

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 IC00test823
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
​
        private void Form1_Load(object sender, EventArgs e)
        {
//设置Chart的时间轴，具体细节看我上一篇文章
            chart1.ChartAreas["ChartArea1"].AxisX.ScaleView.Size = 10;//x坐标显示的个数------------控制这个数量的大小进行缩放     
            chart1.ChartAreas[0].AxisX.LabelStyle.IntervalType = DateTimeIntervalType.Seconds;//设置x轴间隔值单位：秒
            chart1.ChartAreas[0].AxisX.LabelStyle.Interval = 1;//设置X轴的值的间隔大小
            chart1.ChartAreas[0].AxisX.LabelStyle.IsEndLabelVisible = false;//是否在轴末尾显示标记
            chart1.ChartAreas[0].AxisX.LabelStyle.Format = "HH:mm:ss";//设置X轴的数据样式
            chart1.ChartAreas[0].AxisX.ScaleView.MinSizeType = DateTimeIntervalType.Seconds;
            chart1.ChartAreas[0].AxisX.ScaleView.SizeType = DateTimeIntervalType.Seconds; //度量单位
            chart1.ChartAreas[0].AxisX.ScaleView.SmallScrollMinSize = 1;
            chart1.ChartAreas[0].AxisX.ScaleView.SmallScrollMinSizeType = DateTimeIntervalType.Seconds;
            chart1.ChartAreas[0].AxisX.IntervalType = DateTimeIntervalType.Seconds;
            chart1.ChartAreas[0].AxisX.Enabled = AxisEnabled.True;//将X轴始终展示
            chart1.ChartAreas[0].AxisY.Enabled = AxisEnabled.True;//将Y轴始终展示
            chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = Color.Gray;//设置X轴网格线颜色
            chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.Gray;//设置Y轴网格线颜色
            chart1.ChartAreas[0].AxisX.ScrollBar.Enabled = true;//关闭系统的滚动条，也可以不关闭，就可以滑动
            chart1.Series[0].BorderWidth = 2;//线宽
​
//设置Chart的滚动条
            chart1.ChartAreas["ChartArea1"].AxisX.ScrollBar.IsPositionedInside = true;//显示滚动条的位置-图表区域内外设置
            chart1.ChartAreas["ChartArea1"].CursorX.AutoScroll = true;//超出图表区域后-出现滚动条
            chart1.ChartAreas["ChartArea1"].AxisX.ScrollBar.Enabled = true;//开启X轴滚动条
            chart1.ChartAreas["ChartArea1"].AxisX.ScrollBar.Size = 5;//设置滚动条的宽度5-20
            chart1.ChartAreas["ChartArea1"].AxisX.ScrollBar.LineColor = Color.FromArgb(234, 239, 239);//滚动条的边框线条颜色
            chart1.ChartAreas["ChartArea1"].AxisX.ScrollBar.BackColor = Color.White;//滚动条的 背景颜色
            chart1.ChartAreas["ChartArea1"].AxisX.ScrollBar.ButtonStyle = System.Windows.Forms.DataVisualization.Charting.ScrollBarButtonStyles.SmallScroll;//滚动条的样式-只显示左右
            chart1.ChartAreas["ChartArea1"].AxisX.ScrollBar.ButtonStyle = System.Windows.Forms.DataVisualization.Charting.ScrollBarButtonStyles.None;//滚动条的样式-不显示按钮
            chart1.ChartAreas["ChartArea1"].AxisX.ScrollBar.ButtonColor = Color.FromArgb(234, 239, 239);//滚动条上的按钮颜色
            chart1.ChartAreas["ChartArea1"].AxisX.ScaleView.Zoomable = true;//启用缩放界面
        }
​
        private void button1_Click(object sender, EventArgs e)
        {
            timer1.Enabled = !timer1.Enabled;
        }
​
        private void timer1_Tick(object sender, EventArgs e)
        {
            Random random = new Random();
            chart1.Series[0].Points.AddXY(DateTime.Now,random.Next(1,20));
            if(chart1.ChartAreas[0].AxisX.ScaleView.Size>0)
            {
                chart1.ChartAreas[0].AxisX.ScaleView.Scroll(System.Windows.Forms.DataVisualization.Charting.ScrollType.Last);
            }   
        }
    }
}
​

总结

这篇文章比较简单只是简单的对Chart 控件的滚动条的设计，虽然很简单，但是也是可以学到东西的，我们学习了新的知识，对我们的知识储备及技术又有新的一点点的进步，C#的技术就是先简单再难嘛，积少成多之后才会成长才会进步，我们要不断的学习不断的探索，才能有学习的动力，才会有学习的欲望，创作不易，点赞评论收藏关注，嘿嘿，不喜勿喷！！！！