DevExpress之ChartControl实现时间轴实例

本文实例讲述了DevExpress采用ChartControl实现时间轴的方法,分享给大家供大家参考。具体实现方法如下:

关键代码如下:

代码如下:

using System;
using System.Data;
using System.Windows.Forms;
using DevExpress.XtraCharts;

namespace DevExpressChart
{
    public partial class winDateTime : Form
    {
        public winDateTime()
        {
            InitializeComponent();
        }

private void winDateTime_Load(object sender, EventArgs e)
        {
            BuilderDevChart();
        }
        private DataTable CreateChartData()
        {
            DataTable table = new DataTable("Table1");
            table.Columns.Add("Date", typeof(DateTime));
            table.Columns.Add("Value", typeof(Int32));
            table.Rows.Add(new object[] { new DateTime(2014, 5, 21), 10 });
            table.Rows.Add(new object[] { new DateTime(2014, 6, 22), 20 });
            table.Rows.Add(new object[] { new DateTime(2014, 7, 23), 40 });
            table.Rows.Add(new object[] { new DateTime(2014, 8, 24), 20 });
            table.Rows.Add(new object[] { new DateTime(2014, 9, 25), 30 });
            return table;
        }
        private void BuilderDevChart()
        {
            Series _lineSeries = new Series("利润", ViewType.Line);
            _lineSeries.ArgumentScaleType = ScaleType.DateTime;
            _lineSeries.ArgumentDataMember = "Date";
            _lineSeries.ValueDataMembers[0] = "Value";
            _lineSeries.DataSource = CreateChartData();
            chartControl1.Series.Add(_lineSeries);

chartControl1.SetTimeAxisX(DateTimeMeasurementUnit.Month, DateTimeMeasurementUnit.Month, "yyyy-MM");
            //---------------------------------------------------------------

//_lineSeries.ValueScaleType = ScaleType.DateTime;
            //_lineSeries.ArgumentDataMember = "Value";
            //_lineSeries.ValueDataMembers[0] = "Date";
            //_lineSeries.DataSource = CreateChartData();
            //chartControl1.Series.Add(_lineSeries);

//XYDiagram _diagram = (XYDiagram)chartControl1.Diagram;
            //_diagram.AxisY.DateTimeMeasureUnit = DateTimeMeasurementUnit.Month;
            //_diagram.AxisY.DateTimeGridAlignment = DateTimeMeasurementUnit.Month;
            //_diagram.AxisY.DateTimeOptions.Format = DateTimeFormat.Custom;
            //_diagram.AxisY.DateTimeOptions.FormatString = "MMMM";
        }
    }
}

代码如下:

using DevExpress.Utils;
using DevExpress.XtraCharts;

namespace DevExpressChart
{
    public static class ChartUtils
    {
        /// <summary>
        /// 增加数据筛选
        /// </summary>
        /// <param name="SeriesBase">Series</param>
        /// <param name="columnName">列名称</param>
        /// <param name="value">列名称对应的筛选数值</param>
        /// <param name="dataFilterCondition">DataFilterCondition枚举</param>
        public static void AddDataFilter(this SeriesBase series, string columnName, object value, DataFilterCondition dataFilterCondition)
        {
            series.DataFilters.Add(new DataFilter(columnName, value.GetType().FullName, dataFilterCondition, value));
        }

/// <summary>
        /// 设置X轴Lable角度
        /// </summary>
        /// <param name="chart">ChartControl</param>
        /// <param name="angle">角度</param>
        public static void SetXLableAngle(this ChartControl chart, int angle)
        {
            XYDiagram _xyDiagram = (XYDiagram)chart.Diagram;
            if (_xyDiagram != null)
                _xyDiagram.AxisX.Label.Angle = angle;
        }
        /// <summary>
        ///  设置Y轴Lable角度
        /// </summary>
        /// <param name="chart">ChartControl</param>
        /// <param name="angle">角度</param>
        public static void SetYLableAngle(this ChartControl chart, int angle)
        {
            XYDiagram _xyDiagram = (XYDiagram)chart.Diagram;
            _xyDiagram.AxisY.Label.Angle = angle;
        }
        /// <summary>
        /// 设置ColorEach
        /// </summary>
        /// <param name="chart">ChartControl</param>
        /// <param name="colorEach">是否设置成ColorEach</param>
        public static void SetColorEach(this Series series, bool colorEach)
        {
            SeriesViewColorEachSupportBase colorEachView = (SeriesViewColorEachSupportBase)series.View;
            if (colorEachView != null)
            {
                colorEachView.ColorEach = colorEach;
            }
        }
        /// <summary>
        /// 设置是否显示十字标线
        /// </summary>
        /// <param name="chart">ChartControl</param>
        /// <param name="crosshair">是否显示十字标线</param>
        public static void SetCrosshair(this ChartControl chart, bool crosshair)
        {
            chart.CrosshairEnabled = crosshair ? DefaultBoolean.True : DefaultBoolean.False;
            chart.CrosshairOptions.ShowArgumentLabels = crosshair;
            chart.CrosshairOptions.ShowArgumentLine = crosshair;
            chart.CrosshairOptions.ShowValueLabels = crosshair;
            chart.CrosshairOptions.ShowValueLine = crosshair;
        }
        /// <summary>
        /// 新增ChartControl的Title文字
        /// </summary>
        /// <param name="chart">ChartControl</param>
        /// <param name="title">Title文字</param>
        public static void AddTitle(this ChartControl chart, string title)
        {
            ChartTitle _title = new ChartTitle();
            _title.Text = title;
            chart.Titles.Add(_title);
        }
        /// <summary>
        /// 饼状Series设置成百分比显示
        /// </summary>
        /// <param name="series">Series</param>
        public static void SetPiePercentage(this Series series)
        {
            if (series.View is PieSeriesView)
            {
                ((PiePointOptions)series.PointOptions).PercentOptions.ValueAsPercent = true;
                ((PiePointOptions)series.PointOptions).ValueNumericOptions.Format = NumericFormat.Percent;
                ((PiePointOptions)series.PointOptions).ValueNumericOptions.Precision = 0;
            }
        }
        /// <summary>
        /// 将X轴格式化成时间轴
        /// </summary>
        /// <param name="chart">ChartControl</param>
        /// <param name="dateTimeMeasureUnit">X轴刻度单位</param>
        /// <param name="dateTimeGridAlignment">X轴刻度间距的单位</param>
        public static void SetTimeAxisX(this ChartControl chart, DateTimeMeasurementUnit dateTimeMeasureUnit, DateTimeMeasurementUnit dateTimeGridAlignment)
        {
            XYDiagram _diagram = (XYDiagram)chart.Diagram;
            if (_diagram != null)
            {
                _diagram.AxisX.DateTimeMeasureUnit = DateTimeMeasurementUnit.Month;//X轴刻度单位
                _diagram.AxisX.DateTimeGridAlignment = DateTimeMeasurementUnit.Month;//X轴刻度间距
            }
        }
        /// <summary>
        /// 将X轴格式化成时间轴
        /// </summary>
        /// <param name="chart">ChartControl</param>
        /// <param name="dateTimeMeasureUnit">X轴刻度单位</param>
        /// <param name="dateTimeGridAlignment">X轴刻度间距的单位</param>
        /// <param name="formatString">时间格式;eg:yyyy-MM</param>
        public static void SetTimeAxisX(this ChartControl chart, DateTimeMeasurementUnit dateTimeMeasureUnit, DateTimeMeasurementUnit dateTimeGridAlignment, string formatString)
        {
            XYDiagram _diagram = (XYDiagram)chart.Diagram;
            if (_diagram != null)
            {
                _diagram.AxisX.DateTimeMeasureUnit = DateTimeMeasurementUnit.Month;//X轴刻度单位
                _diagram.AxisX.DateTimeGridAlignment = DateTimeMeasurementUnit.Month;//X轴刻度间距
                _diagram.AxisX.DateTimeOptions.Format = DateTimeFormat.Custom;
                _diagram.AxisX.DateTimeOptions.FormatString = formatString;
            }
        }
    }
}

运行效果如下图所示:

希望本文所述对大家的C#程序设计有所帮助

(0)

相关推荐

  • jQuery时间轴插件使用详解

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

  • jQuery代码实现发展历程时间轴特效

    分享一款基于jQuery发展历程时间轴特效代码,带左右箭头,数字时间轴选项卡切换特效下载.有效果图有实现代码给大家展示如下: html代码: <div id="timeline"> <ul id="issues"> <li id="1900"> <img src="images/img4.jpg" width="436" height="300"

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

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

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

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

  • PHP实现时间轴函数代码

    本文将介绍如何实现基于时间轴的时间的转换. 首先我们要明白时间的几个函数: time():返回当前的 Unix 时间戳 date():格式化一个本地时间/日期. 应用举例: 复制代码 代码如下: date("Y-m-d H:i:s",time()); //格式化当前时间,输出:2011-9-24 07:27:35 strtotime():将任何英文文本的日期时间描述解析为 Unix 时间戳. 应用举例: 复制代码 代码如下: echo strtotime("+1 day&qu

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

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

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

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

  • Android自定义时间轴的实现过程

    本文讲述Android自定义时间轴的实现过程,供大家参考,具体内容如下 相关视频链接: Android自定义控件系列 http://edu.csdn.net/course/detail/3719/65396 Android视频全系列 http://edu.csdn.net/course/detail/2741/43163 时间轴效果,实际上非常简单,就是listView中一个又一个的条目而已-.大家可以只关注一个条目. 首先展示一个条目的布局效果 <?xml version="1.0&qu

  • jQuery+HTML5+CSS3制作支持响应式布局时间轴插件

    jQuery时间轴插件效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实现的效果.  另外页面中圆形.圆角和三角同样使用了CSS3的特殊样式.这些基础的样式和效果在本文中不会赘述,不了解的童鞋可以上网搜索学习一下,很简单.  页面上每个时间节点的展示内容提供了三种展示样式,多张图片的展示风格.单张图片的展示风格和无图片的展示风格.这些可以根据自己的需求

  • jQuery Timelinr实现垂直水平时间轴插件(附源码下载)

    jquery.timelinr.js是一款效果非常炫酷的jQuery时间轴插件.jquery.timelinr可以制作水平和垂直时间轴效果,并且可以进行自动播放.你可以通过参数来控制每次时间轴切换的动画效果. 推荐阅读:之前分享过一款 jQuery实现企业发展简史时间轴特效源码 ,它的界面展示效果很不错. 效果展示       源码下载 使用方法 使用该时间轴插件需要在页面中引入jQuery和jquery.timelinr.js文件. <script src="js/jquery-1.x.

随机推荐