Mschart绘制图表之X轴为时间的设置方式

最近使用C#开发图表,比较了DirectorChart,DontNetCharting,TeeChart,最终选用微软的mschart开发,对于X轴作为时间轴探索了好久,终于实现了想要的效果。

界面效果:

核心代码:
 

源码

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using ComponentFactory.Krypton.Toolkit;
using System.Windows.Forms.DataVisualization.Charting;

namespace Krypton440Test
{
    public partial class Form4 : ComponentFactory.Krypton.Toolkit.KryptonForm
    {
        public Form4()
        {
            InitializeComponent();
        }

        private void Form4_Load(object sender, EventArgs e)
        {
            //清空原来数据缓存
            chart1.Series[0].Points.Clear();

            //定义图表大小尺寸
            chart1.Width = Width - 100;
            chart1.Height = Height - 100;

            //定义X轴、Y轴数据
            double[] Ydata = { 20, 3, 23 ,6};
            DateTime[] Xdate = new DateTime[] { DateTime.Parse("09:10:02"), DateTime.Parse("09:10:10"),DateTime.Parse("09:10:15"), DateTime.Parse("09:10:20") };

            //以下按照先绘制chartArea、然后再绘制Series的步骤画图
            //chartArea背景颜色
            chart1.BackColor = Color.Azure;

            //X轴设置
            chart1.ChartAreas[0].AxisX.Title = "时间";
            chart1.ChartAreas[0].AxisX.TitleAlignment = StringAlignment.Near;
            chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;//不显示竖着的分割线

            /************************************************************************/
            /* 本文重点讲解时间格式的设置
             * 如果想显示原点第一个时间坐标,需要设置最小时间,时间间隔类型,时间间隔值等三个参数*/
            /************************************************************************/
            chart1.ChartAreas[0].AxisX.LabelStyle.Format = "HH:mm:ss"; //X轴显示的时间格式,HH为大写时是24小时制,hh小写时是12小时制
            chart1.ChartAreas[0].AxisX.Minimum = DateTime.Parse("09:10:02").ToOADate();
            chart1.ChartAreas[0].AxisX.Maximum = DateTime.Parse("09:10:21").ToOADate();
            chart1.ChartAreas[0].AxisX.IntervalType = DateTimeIntervalType.Seconds;//如果是时间类型的数据,间隔方式可以是秒、分、时
            chart1.ChartAreas[0].AxisX.Interval = DateTime.Parse("00:00:02").Second;//间隔为1秒

            //Y轴设置
            chart1.ChartAreas[0].AxisY.Title = "数据点";
            chart1.ChartAreas[0].AxisY.TitleAlignment = StringAlignment.Center;
            chart1.ChartAreas[0].AxisY.MajorGrid.Enabled = true;//显示横着的分割线
            chart1.ChartAreas[0].AxisY.Minimum = 0;
            chart1.ChartAreas[0].AxisY.Maximum = 25;
            chart1.ChartAreas[0].AxisY.Interval = 5;

            //Series绘制
            chart1.Series[0].LegendText = "温度点";
            chart1.Series[0].ChartType = SeriesChartType.Spline;
            chart1.Series[0].XValueType = ChartValueType.DateTime;
            chart1.Series[0].IsValueShownAsLabel = true;//显示数据点的值
            chart1.Series[0].MarkerStyle = MarkerStyle.Circle;

            //把数据点添加到Series图表中
            for (int i = 0; i < Xdate.Length; i++)
            {
                chart1.Series[0].Points.AddXY(Xdate[i], Ydata[i]);
            }
        }
    }
}

  

时间: 2024-10-09 06:46:42

Mschart绘制图表之X轴为时间的设置方式的相关文章

网页绘制图表 Google Charts with JavaScript #1....好强、好简单啊!

此为文章备份,原文出处(我的网站) 网页绘制图表 Google Charts with JavaScript....好强.好简单啊!#1 http://www.dotblogs.com.tw/mis2000lab/archive/2014/01/23/google_charts-javascript.aspx 今天看见 g+一篇文章 http://inspiredtoeducate.net/inspiredtoeducate/?p=1319 因而发觉这个东西. 我先连到 Google原厂网站,看

QCustomplot使用分享(九) 绘制图表-多功能游标

目录 一.概述 二.效果图 三.源码讲解 1.源码结构 2.头文件 3.添加游标 4.监测移动 5.移动游标 6.其他函数 四.测试方式 1.测试工程 2.测试文件 3.测试代码 五.相关文章 六.总结 七.关于美化 原文链接:QCustomplot使用分享(九) 绘制图表-多功能游标 一.概述 上一篇文章QCustomplot使用分享(八) 层(完结)讲述了第一篇QCustomPlot控件的使用,主要是展示了多维度折线图,并且有一个简单的游标展示效果.本篇文章是在上一篇文章的基础上进行的功能加

iOS:使用贝塞尔曲线绘制图表(折线图、柱状图、饼状图)

1.介绍: UIBezierPath :画贝塞尔曲线的path类 UIBezierPath定义 : 贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度. 曲线的定义有四个点:起始点.终止点(也称锚点)以及两个相互分离的中间点. 滑动两个中间点,贝塞尔曲线的形状会发生变化. UIBezierPath :对象是CGPathRef数据类型的封装,可以方便的让我们画出 矩形 . 椭圆 或者 直线和曲线的组合形状 初始化方法: + (instancetype)bezierPath; /

使用kibana和elasticsearch日志实时绘制图表

前言: 此文接的是上篇,上次的内容是,用python操作elasticsearch存储,实现数据的插入和查询.  估计有些人一看我的标题,以为肯定是 logstash kibana elasticsearch的组合.这三个家伙也确实总是勾搭在一块. 其实logstash是可以被别的替换,比如常见的fluented .剩下的那两个,kibana和elasticsearch是一伙的,不好做分离. 这次用的不是那种开源的.cs模式日志收集应用,还真不是.而是自己直接从程序里面把日志打到elastics

Echarts的柱状统计图出现x轴统计时间出现间隔显示的问题

今天在使用Echarts的柱状统计图出现x轴统计时间出现间隔显示的问题: 数据都拿到了,放到Json数组都是完整的, 展现是时候 如下图: ------------------------------------------------------jsp页面代码 的div <div class="f-r w-b45">                <div id="proMonthCount" style="min-width: 310

在Android上用AChartEngine轻松绘制图表

本文由 伯乐在线 - LeonHover 翻译.未经许可,禁止转载!英文出处:jaxenter.欢迎加入翻译组. Android发布不久的2008年底,开发者们已经开始寻找制表.制图.绘图的工具库.当时没有这样免费或者开源的解决方案可用. 我开始带着兴趣评估Android,在开发了若干个需要一些制图的Android应用程序后,我决定开源AChartEngine的代码.在2009年3月启动了0.2.0版本,第一个开源的是Android图表工具库.那个时候,Android SDK是版本1.1. 近4

使用D3绘制图表(4)--面积图表

面积图表的绘制就是在曲线图表的基础上做一点小小的改动.其他的代码跟绘制曲线图表没有什么区别,下面有黄色背景颜色的代码就是修改的,是不是很简单,第一句修改的地方就是把之前绘制线的函数(line)改成了绘制面积的函数(area):第二句代码就是加的一行,“.y0(g_height)”这个意思代表的是x轴.“.y1(function(d){return scale_y(d);})”这句和上一句就构成了一个面积,“.style("fill","cornflowerblue"

Highcharts使用表格数据绘制图表

Highcharts使用表格数据绘制图表 在Highcharts中,允许用户使用网页中现有的表格数据作为数据来源,然后根据该数据来源绘制图表.对于一个典型的HTML表格.其中,第一列的数据会作为x轴刻度:而对于第二列.第三列.第四列的数据,每一列数据会作为一个数据列.在第一行中,从第二个数据开始作为每个数据列的名字.由于下图中只包含两列,所以第一列作为x轴的值:第二列作为一个数据列,并且数据列的名字为"成绩".生成的图表如下: 使用表格数据绘制图表 PS:该内容已经加入<网页图表

Highcharts使用CSV格式数据绘制图表

Highcharts使用CSV格式数据绘制图表 CSV(Comma-Separated Values,逗号分隔值文本格式)是采用逗号分割的纯文本数据.通常情况下,每个数据之间使用逗号分割,几个相关数据组成一行,多行数据组成一个CSV格式数据.由于其纯文本的特点,所以各类数据库都可以直接导出和导入CSV格式的数据.下面就是一个简单的CSV格式数据: 模拟考试,成绩 1,85 2,93 3,95 4,91 5,97 6,94 7,89 其中,第一列是x轴的值,以后的每一列都是一个数据列.从第一行的第