C# 设置Chart的X轴为时间轴​​​​​​​详情

目录
  • 前言
  • 界面设计
  • 效果展示
  • 代码逻辑

前言

将Chart的X轴设置为时间轴是一个说简单不简单的问题,说难也不难的问题,你用过之后呢就感觉很容易,你没用过呢,就比较难,所以这个是很值得我们学习的,我看了别的社区也没有具体讲,所以我想分享一下,万一我自己忘记了,也可以翻这篇文章去复习,我们一起来学习一下吧,虽然这篇文章比较简单,也是值得学习的,创作不易,点赞关注评论收藏,谢谢大家啦!!!

界面设计

对界面的设计,使用timer定时器按照每秒循环生成随机数添加进Chart里面,使我们实现每秒添加值,形成曲线运动,开始按钮是对于定时器的控制,然后我们将代码复制到我们的项目中对于chart的折线图设置,就可以实现时间轴为X轴。注意:虽然我们是有AddXY的方法,但是如果你不设置X轴就会出现你添加的时间是有问题的,另外,如果我们要把自己的时间添加进去需要对时间进行.ToOADate()操作才可以。

效果展示

效果展示就是下图,最下面的是启用了系统滚动条,样子有点丑

如果你的时间不是采用系统时间添加,可能会出现添加时间不进去或者出现错误,如果你想添加你自己的时间需要对这个时间进行“.ToOADate()”操作,datetime.AddSeconds(1).ToOADate(),假设datetime是你的时间,AddSeconds(1)是代表在你的datetime的基础上加一秒,.ToOADate()这是自动化日期,类似时间戳,datetime.ToOADate(),也可直接这样不用加一秒,就是你的那个时间,注意一定要加.ToOADate()!!!!

代码逻辑

复制那段对于chart的折线图的设置,直接用我都有备注,注意:里面有条语句chart1.ChartAreas[0].AxisX.ScaleView.Scroll(System.Windows.Forms.DataVisualization.Charting.ScrollType.Last)是关于滚动条视图的,就是说我们的数据可以一直往前跑我们可以看得到,实现数据滚动, 但是建议跟着我那个if一起用避免报错,代码如下,你们可以直接复制。

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)
        {
            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 = false;//关闭系统的滚动条,也可以不关闭,就可以滑动
            chart1.Series[0].BorderWidth = 2;//线宽
        }
        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);
            }
        }
    }
}

到此这篇关于C# 设置Chart的X轴为时间轴详情的文章就介绍到这了,更多相关C# 时间轴内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • c# 设置TeeChart控件的提示文本

    使用第三方Steema的TeeChart控件,设置鼠标放在某一线条点上,显示某一点的数据标签问题(虚线型十字光标基准线,放在线上显示对应点的二维坐标轴数据数据),调用InitTeeChartTipTools方法即可: /// <summary> /// TeeChart线条的指示工具 /// </summary> Steema.TeeChart.Tools.CursorTool cursorTool; /// <summary> /// 鼠标指示显示的文本 /// &l

  • C#实现chart控件动态曲线绘制

    本文实例为大家分享了C#实现chart控件动态曲线绘制的具体代码,供大家参考,具体内容如下 思想 实验室要做一个动态曲线绘制,网上方法很多,但是缺乏完整代码和效果图的整合,往往总是缺少其一,因此整理如下,方便大家编程,节约时间.思路:新建一个队列,利用timer控件,动态的往队列中加入数据,每次触发事件,就相当于将队列中的值全部重新画一遍. 我的目的是做四个点的动态监测,所以代码重复了四次,其实应该用4个线程来做,思路就显得较为清晰了,这也是可以改进的地方. public partial cla

  • C# Chart绘制简单图形波形

    本文实例为大家分享了C# Chart绘制简单图形波形的具体代码,供大家参考,具体内容如下 此次用C#绘制波形使用的是Chart控件 1.将Chart控件拖进主界面,然后设置属性. //  // chart1 //  chartArea2.Name = "ChartArea1"; this.chart1.ChartAreas.Add(chartArea2); legend2.Name = "Legend1"; this.chart1.Legends.Add(legen

  • C# Chart折线图使用鼠标滚轮放大、缩小和平移曲线方式

    目录 Chart折线图使用鼠标滚轮放大.缩小和平移曲线 添加鼠标滚轮事件 初始化有关参数 添加鼠标按下.弹起和移动事件 如何使用Chart图表 效果图 数据 图表 外观 Chart折线图使用鼠标滚轮放大.缩小和平移曲线 使用鼠标滚轮滚动放大和缩小X轴的宽度,鼠标左键按住拖动实现曲线的左右平移,不再使用滚动条. 添加鼠标滚轮事件 在chart控件自带的鼠标事件中并没有鼠标的滚轮事件,因此需要手动添加一下,在窗体的Designer.cs文件下的InitializeComponent()函数中添加如下

  • C#中dotnetcharting的用法实例详解

    本文以实例形式详细讲述了dotnetcharting控件的用法.分享给大家供大家参考.具体用法分析如下: dotnetcharting 是一个很好用的图表控件,能画出很漂亮的报表,一般常用到的主要有柱状图.饼图.折线图三种. dotnetcharting 有web版.winform版多个版本可供使用,官方网址:http://www.dotnetcharting.com/ ,官网有很多示例(http://www.dotnetcharting.com/gallery/),而且有winform安装版示

  • C#使用Chart绘制曲线

    本文实例为大家分享了C#使用Chart绘制曲线的具体代码,供大家参考,具体内容如下 新建一个控制台应用程序,程序名:WindowsFormsApp2,将下面的代码拷贝进去即可 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using

  • C# 设置Chart的X轴为时间轴​​​​​​​详情

    目录 前言 界面设计 效果展示 代码逻辑 前言 将Chart的X轴设置为时间轴是一个说简单不简单的问题,说难也不难的问题,你用过之后呢就感觉很容易,你没用过呢,就比较难,所以这个是很值得我们学习的,我看了别的社区也没有具体讲,所以我想分享一下,万一我自己忘记了,也可以翻这篇文章去复习,我们一起来学习一下吧,虽然这篇文章比较简单,也是值得学习的,创作不易,点赞关注评论收藏,谢谢大家啦!!! 界面设计 对界面的设计,使用timer定时器按照每秒循环生成随机数添加进Chart里面,使我们实现每秒添加值

  • jQuery插件Timelinr 实现时间轴特效

    前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. HTML 我们在body中建立一个div#timeline作为展示区,#dates为时间轴,示例中我们用年份作为主轴,#issues作为内容展示区,即展示对应主轴点年份的内容,注意id对应上. <div id="timeline"> <ul id="dates&

  • Vue时间轴 vue-light-timeline的用法说明

    轻量的vue时间轴组件 install npm install vue-light-timeline 如果你使用的是yarn yarn add vue-light-timeline usage import LightTimeline from 'vue-light-timeline'; Vue.use(LightTimeline); <template> <light-timeline :items='items'></light-timeline> </tem

  • Vue.js实现时间轴功能

    本文实例为大家分享了Vue.js实现时间轴功能的具体代码,供大家参考,具体内容如下 GitHub 时间轴组件封装 Main.js <template> <div class="timeline-main"> <div class="timeline-axis"> <div class="axis-item" v-for="(time, index) in dateTimes" :key

  • DevExpress之ChartControl实现时间轴实例

    本文实例讲述了DevExpress采用ChartControl实现时间轴的方法,分享给大家供大家参考.具体实现方法如下: 关键代码如下: 复制代码 代码如下: using System; using System.Data; using System.Windows.Forms; using DevExpress.XtraCharts; namespace DevExpressChart {     public partial class winDateTime : Form     {   

  • vue中实现当前时间echarts图表时间轴动态的数据(实例代码)

    代码如下所示: <!-- ! 废话不多说,直接看代码吧 ! --> <template> <div class=""> <div class="chart" ref="ref_chart" style="width:370px;height:250px;"> </div> </div> </template> <script lang=&

  • Android控件之使用ListView实现时间轴效果

     实现思路: 该View是通过ListView实现的,通过实体两个字段内容content和时间time来展示每个ListItem 时间轴是使用上面一条线(20dp)和中间一个圆(15dp)和下面一条线(40dp)组装成的 在ListView中,设置其分割线为空,并且没有点击效果 效果图: 步骤一:使用xml画出一个灰色的圆点(time_cycle.xml) <?xml version="1.0" encoding="utf-8"?> <shape

  • jQuery时间轴插件使用详解

    这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接,  那个三角会滚动, 然后左侧的界面也会滚动: 实际的效果如下图,用户点击左侧的按钮或者右侧的input,滚动条都会主动滚动, 这里有个小技巧就是用after和before伪类生成三角形, 用户点击按钮的滚动效果直接用jq的animate方法: <!-- //设置内容; window.onWebMessage( '{"type":&qu

  • TimergliderJS 一个基于jQuery的时间轴插件

    Timeglider JS是一个由javascript支持缩放,数据驱动的时间轴组件.非常适合显示项目历史,项目计划及其其它需要显示历史的项目. 时间轴可以通过右边拖放垂直滑动器来缩放界面:向上缩小,向下放大.同时也支持使用滚轮来控制缩放.通过鼠标拖东空白处可以左右拖动时间轴,点击事件可以弹出一个小窗口来描述时间内容及其数据. JS组件有以下几个目标: 支持iPads和其它支持触摸的设备 非常容易整合到基于HTML/JS应用和界面 支持复杂的布局,并且可以对任何指定自定义HTML元素添加事件 安

  • 基于jQuery和CSS3制作响应式水平时间轴附源码下载

    我们经常看到有很多的垂直时间轴用来记录事件进展,而有朋友问我要求分享水平的时间轴,其实水平时间轴的难点在于自适应屏幕尺寸.那么 今天我要给大家分享的是一款支持响应式.支持触屏手势滑动的水平时间轴. 效果展示     源码下载 HTML 我们的HTML结构由两部分组成,div.timeline用于放置日期导航水平线,它有水平多个日期div.events-wrapper和水平轴左右方向导航按钮ul.cd-timeline-navigation组成.而div.events-content放置的是多个日

随机推荐