DevExpress使用之ChartControl控件绘制图表（多坐标折线图、柱状图、饼状图）

最近因为公司项目需要用到WinForm的DecExpress控件，在这里把一些使用方法总结一下。

DevExpress中有一个专门用来绘制图表的插件ChartControl，可以绘制折线图、饼状图、柱状图等图表。

1.绘制图表基本步骤

　　准备数据并绑定

　　这里从数据库中取得数据，可以根据自己的需要修改。

 1 DataTable dtData = BF<bll_ep_collection_data>.Instance.GetDataTable(sqlwhere, "data_time", parameters);

 2 //建立新的datatable，用来存储XY坐标

 3 DataTable dtXY = new DataTable();

 4 //横坐标的值

 5 dtXY.Columns.Add(new DataColumn("类型"));

 6 var list = new List<object>();

 7 //纵坐标的值

 8 list.Add("数值");

 9 //这里是控制x轴显示数据的数量，ArgumentScaleType类型设置为ScaleType.Qualitative时他不会自动控制x轴的数量

10 //如果得到数据小于X_COUNT，则x轴显示全部得到的数据

11 if (X_COUNT < dtData.Rows.Count)

12 {

13     for (int i = 0; i < X_COUNT; i++)

14     {

15         int index = (dtData.Rows.Count / X_COUNT) * i;

16         DataRow item = dtData.Rows[index];

17         dtXY.Columns.Add(new DataColumn(item["data_time"].ToString(), typeof(decimal)));

18         list.Add(item["value"]);

19     }

20 }

21 //如果得到数据大于X_COUNT，则x轴X_COUNT条数据

22 else

23 {

24     for (int i = 0; i < dtData.Rows.Count; i++)

25     {

26         DataRow item = dtData.Rows[i];

27         dtXY.Columns.Add(new DataColumn(item["data_time"].ToString(), typeof(decimal)));

28         list.Add(item["value"]);

29     }

30 }

31 var array = list.ToArray();

32 dtXY.Rows.Add(array);

33 this.chartControl1.DataSource = dtXY;

　　一个更直白的例子：

 1 DataTable dt = new DataTable();

 2 dt.Columns.Add(new DataColumn("类型"));

 3 dt.Columns.Add(new DataColumn("2005-1月", typeof(decimal)));

 4 dt.Columns.Add(new DataColumn("2005-2月", typeof(decimal)));

 5 dt.Columns.Add(new DataColumn("2005-3月", typeof(decimal)));

 6 dt.Columns.Add(new DataColumn("2005-4月", typeof(decimal)));

 7 dt.Columns.Add(new DataColumn("2005-5月", typeof(decimal)));

 8 dt.Columns.Add(new DataColumn("2005-6月", typeof(decimal)));

 9

10 dt.Rows.Add(new object[] { "员工人数", 437, 437, 414, 397, 387, 378 });

11 dt.Rows.Add(new object[] { "人均月薪", 3964, 3961, 3979, 3974, 3967, 3972 });

12 dt.Rows.Add(new object[] { "成本TEU", 3104, 1339, 3595.8, 3154.5, 2499.8, 3026 });

13 dt.Rows.Add(new object[] { "人均生产率", 7.1, 3.06, 8.69, 7.95, 6.46, 8.01 });

14 dt.Rows.Add(new object[] { "占2005年3月人数比例", 1.06, 1.06, 1, 0.96, 0.93, 0.91 });

　　根据数据创建图形展现

　 CreateSeries用于创建一个典型的图形，这里展示创建一条曲线。

 /// <summary>

 /// 根据数据创建一个图形展现

 /// </summary>

 /// <param name="caption">图形标题</param>

 /// <param name="viewType">图形类型</param>

 /// <param name="dt">数据DataTable</param>

 /// <param name="rowIndex">图形数据的行序号</param>

 /// <returns></returns>

 private Series CreateSeries(string caption, ViewType viewType, DataTable dt, int rowIndex)

 {

     Series series = new Series(caption, viewType);

     for (int i = ; i < dt.Columns.Count; i++)

     {

         string argument = dt.Columns[i].ColumnName;//参数名称

         decimal value = (decimal)dt.Rows[rowIndex][i];//参数值

         series.Points.Add(new SeriesPoint(argument, value));

     }

     //必须设置ArgumentScaleType的类型，否则显示会转换为日期格式，导致不是希望的格式显示

     //也就是说，显示字符串的参数，必须设置类型为ScaleType.Qualitative

     series.ArgumentScaleType = ScaleType.Qualitative;

     //series.ArgumentScaleType = ScaleType.DateTime;

     series.LabelsVisibility = DevExpress.Utils.DefaultBoolean.False;//显示标注标签

     return series;

 }

　　根据图形对象创建一个图表并绑定到CharControl中

 /// <summary>

 /// 根据图形对象创建一个图表

 /// </summary>

 /// <param name="chartControl">图表绑定控件</param>

 /// <param name="list">图表中的图形展现</param>

 /// <returns></returns>

 private void CreateChart(ChartControl chartControl, List<Series> list)

 {

     chartControl.Series.AddRange(list.ToArray());

     chartControl.Legend.Visible = false;

     chartControl.SeriesTemplate.LabelsVisibility = DefaultBoolean.False;

     //XYDiagram diagram = (XYDiagram)chartControl1.Diagram;

     //diagram.AxisX.DateTimeMeasureUnit = DateTimeMeasurementUnit.Second;

     //diagram.AxisX.DateTimeOptions.Format = DateTimeFormat.Custom;

     //diagram.AxisX.DateTimeOptions.FormatString = "yyyy-MM-dd HH:mm:ss";

 }

　　调用函数绘制图表

 //清空ChartControl控件

 chartControl1.Series.Clear();

 //创建图形对象的列表

 List<Series> list = new List<Series>();

 foreach (DataRowView item in listBox.Items)

 {

     string str = item["key"].ToString();

     //通过LoadData返回一个DataTable

     DataTable dtXY = LoadData(str);

     //创建一个图形对象

     Series series = CreateSeries(caption, type, dtXY, );;

     list.Add(series);

 }

 //根据图形对象列表创建一个图表

 CreateChart(chartControl1, list);

　　小结：在绘制折线图的时候我遇到的一个很大的问题就是没办法控制数据的显示数量，因为数据库中存储的数据量过大，在一定时间段内的数据都能达到上千条，所以不可能一次性全部显示。我想到的解决办法是固定显示多少条数据，比如说20条，然后根据数据量每隔一段距离取一条数据显示。　　

2.柱状图

绘制柱状图其实和绘制折线图没有什么区别，就是将new Series时的图形类型改为ViewType.Bar即可，这里我想总结一下一个困扰我很久的问题，如何绘制上图所示的一个横坐标对应两个或者多个柱子。

　　准备数据

 DataTable dtData = SqlHelper.GetDataSet(sql, parameters).Tables[];

 //建立新的datatable，用来存储XY坐标

 DataTable dtXY_max = new DataTable();

 DataTable dtXY_min = new DataTable();

 dtXY_max.Columns.Add(new DataColumn("类型"));

 dtXY_min.Columns.Add(new DataColumn("类型"));

 var list_max = new List<object>();

 list_max.Add("数值");

 var list_min = new List<object>();

 list_min.Add("数值");

 for (int i = ; i < dtData.Rows.Count; i++)

 {

     DataRow item = dtData.Rows[i];

     string value = item["max"].ToString() + "|" + item["min"].ToString();

     //dtXY.Columns.Add(new DataColumn(item["data_time"].ToString(), typeof(string)));

     //list.Add(value);

     dtXY_max.Columns.Add(new DataColumn(item["data_time"].ToString(), typeof(decimal)));

     list_max.Add(item["max"]);

     dtXY_min.Columns.Add(new DataColumn(item["data_time"].ToString(), typeof(decimal)));

     list_min.Add(item["min"]);

 }

 var array_max = list_max.ToArray();

 dtXY_max.Rows.Add(array_max);

 var array_min = list_min.ToArray();

 dtXY_min.Rows.Add(array_min);

　　创建图形展现对象方法

 /// <summary>

 /// 根据数据创建一个图形展现

 /// </summary>

 /// <param name="caption">图形标题</param>

 /// <param name="viewType">图形类型</param>

 /// <param name="dt">数据DataTable</param>

 /// <param name="rowIndex">图形数据的行序号</param>

 /// <returns></returns>

 private Series CreateSeries(string caption, ViewType viewType, DataTable dt, int rowIndex)

 {

     Series series = new Series(caption, viewType);

     for (int i = ; i < dt.Columns.Count; i++)

     {

         string argument = dt.Columns[i].ColumnName;//参数名称

         decimal value = (decimal) dt.Rows[rowIndex][i];

         series.Points.Add(new SeriesPoint(argument, value));

     }

     //柱状图柱子的宽度设置

     //BarSeriesView bsv = (BarSeriesView)series.View;

     //bsv.BarWidth = 0.1;

     //必须设置ArgumentScaleType的类型，否则显示会转换为日期格式，导致不是希望的格式显示

     //也就是说，显示字符串的参数，必须设置类型为ScaleType.Qualitative

     series.ArgumentScaleType = ScaleType.Qualitative;

     //series.ArgumentScaleType = ScaleType.DateTime;

     series.LabelsVisibility = DevExpress.Utils.DefaultBoolean.True;//显示标注标签

     return series;

 }

　　根据图形对象创建图表

 /// <summary>

 /// 根据图形对象创建一个图表

 /// </summary>

 /// <param name="chartControl">图标绑定控件</param>

 /// <param name="list">图表中的图形展现</param>

 /// <returns></returns>

 private void CreateChart(ChartControl chartControl, List<Series> series)

 {

     chartControl.Series.AddRange(series.ToArray());

     //chartControl.Series.Add(series);

     chartControl.Legend.Visible = true;

     chartControl.SeriesTemplate.LabelsVisibility = DefaultBoolean.True;

     XYDiagram xydiagram = (XYDiagram)chartControl.Diagram;

     xydiagram.AxisX.MinorCount = ;

 }

3.饼状图

　　准备数据

 private DataTable CreateChartData()

 {

     DataTable dtData = SqlHelper.GetDataSet(sql, parameters).Tables[];

     DataTable table = new DataTable("Table1");

     table.Columns.Add("Name", typeof(String));

     table.Columns.Add("Value", typeof(Double));

     foreach (DataRow item in dtData.Rows)

     {

         var array = new object[] { item["value_num"], item["count"] };

         table.Rows.Add(array);

     }

     return table;

 }

　　创建一个饼状图

 /// <summary>

 /// 根据数据创建一个饼状图

 /// </summary>

 /// <returns></returns>

 private void BuilderDevChart()

 {

     Series _pieSeries = new Series("测试", ViewType.Pie);

     _pieSeries.ValueDataMembers[] = "Value";

     _pieSeries.ArgumentDataMember = "Name";

     _pieSeries.DataSource = CreateChartData();

     chartControl1.Series.Add(_pieSeries);

     _pieSeries.SetPiePercentage();

     _pieSeries.LegendPointOptions.PointView = PointView.ArgumentAndValues;

 }

　　设置饼状图显示方式（数值/百分比）

 public static class ExtensionClass

 {

     /// <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 = false;

             //((PiePointOptions)series.PointOptions).ValueNumericOptions.Format = NumericFormat.Number;

             //((PiePointOptions)series.PointOptions).ValueNumericOptions.Precision = 0;

             //设置为百分比

             ((PiePointOptions)series.PointOptions).PercentOptions.ValueAsPercent = true;

             ((PiePointOptions)series.PointOptions).ValueNumericOptions.Format = NumericFormat.Percent;

             ((PiePointOptions)series.PointOptions).ValueNumericOptions.Precision = ;

         }

     }

 }

原文： https://mrlrf.github.io/2016/12/07/DevExpress-ChartControl/

DevExpress使用之ChartControl控件绘制图表（多坐标折线图、柱状图、饼状图）的更多相关文章

WinForm DevExpress使用之ChartControl控件绘制图表一——基础
最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...
WinForm DevExpress使用之ChartControl控件绘制图表二——进阶
1. 多坐标折线图在这个项目中,我需要做不同采集地方和不同数据类型的数据对比,自然而然就用到了多重坐标轴,多重坐标轴可以是多个X轴,也可以是Y轴,它们的处理方式类似.本文通过项目中的实际例子介绍多重 ...
ZedGrap控件绘制图表曲线
问题描述: 使用C#中ZedGrap控件绘制图表曲线图 ZedGrap 介绍说明: 安装ZedGrap控件 ZedGraph控件dll文件: 添加ZedGraph控件,首先在新建立的C#图像工 ...
Android绘图机制（四）——使用HelloCharts开源框架搭建一系列炫酷图表，柱形图，折线图，饼状图和动画特效，抽丝剥茧带你认识图表之美
Android绘图机制(四)--使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美这里为什么不继续把自定义View写下去呢,因为最近项目 ...
DevExpress ChartControl控件实现图表【转】
1.饼状图图 1.1添加ChartControl控件在工具箱中找到ChartControl控件,拖到窗口中,创建Pie: 1.2准备数据 private DataTable CreateChartD ...
Android开源图表之树状图和饼状图的官方示例的整理
最近由于工作需要,所以就在github上搜了下关于chart的三方框架官方地址https://github.com/PhilJay/MPAndroidChart 由于工作需要我这里整理了一份Ecli ...
【转】使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)
第一次写博,没什么经验,主要是把最近自己对Dev的一些研究贴出来大家共同探讨,有不足之处望大家帮忙斧正. WebChartControl是DevExpress控件群下的一个Web图表控件,它使用非常的 ...
C# WinForm开发系列之c# 通过.net自带的chart控件绘制饼图,柱形图和折线图的基础使用和扩展
一.需要实现的目标是: 1.将数据绑定到pie的后台数据中,自动生成饼图. 2.生成的饼图有详细文字的说明. 1.设置chart1的属性Legends中默认的Legend1的Enable为false: ...
C# 绘制图表（柱状图，线性图，饼状图）
http://blog.csdn.net/gisfarmer/article/details/3736452 Chart饼状图,每根柱子的宽度: int a = Chart1.Series[" ...

随机推荐

CSS3- px、em、rem区别介绍
PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em ...
为什么无法发起qq临时会话，必须添加好友？如何设置才能临时会话？
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-06-03) 一. QQ等级低于10级不能进行临时会话按照腾讯的设置,QQ等级如果低于10级(2个月亮+2颗星星),无法发起 ...
Putty 工具保存配置的小技巧
用Putty 已经很长时间了,但一直被一个问题困扰,有时候是懒得去弄,反正也不怎么碍事,今天小研究了下,把这个问题解决了,心里也舒服了. Putty是一个免费小巧的Win32平台下的telnet,rl ...
C#常用类汇总
一.object常用类 1.获取去类的类型和公共属性 var a= new Class A(); var props = A.GetType().GetProperties();
MySQL 错误代码和消息
本章列出了当你用任何主机语言调用MySQL时可能出现的错误.首先列出了服务器错误消息.其次列出了客户端程序消息. B.1. 服务器错误代码和消息服务器错误信息来自下述源文件: · 错 ...
Html游戏开发-画图
1. 画矩形和写字 var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); context ...
pjsip视频通信开发(上层应用)之EditText重写
我们经常使用手机的打电话功能,当我们按键盘的时候,有一个地方显示我们按键的内容,当我们的手点击那个地方的时候,并没有弹出软件盘,所以我们再有数字键盘的时候,要屏蔽系统的软件盘. 我们分析一下,软件盘弹 ...
Android 开发之异常处理篇（一）：SDK Manager 闪退的解决方法
这个问题困扰了我很久,之前没解决,就放一放.后来我又专门拿了一个下午来找解决方法,终于搞定! 我的解决方法是修改 android.bat,直接指定java.exe所在位置,不用去调用find_java ...
Visual Studio Code 1.0.1 for python
1. 安 F1健 ext install python E:\test\.vscode下的三个文件 2.launch.json { "version": "0.1.0&q ...
linux入侵检测系统snort安装配置
队长让俺瞅瞅snort,没想到安装配置都遇到问题...整理下过程,给跟我一样的家伙看看.. 由于本人机器是ubuntu,apt-get 几下就可以了,其实网上有不少这样的文章...之所以还要写就是.. ...

DevExpress使用之ChartControl控件绘制图表（多坐标折线图、柱状图、饼状图）

1.绘制图表基本步骤

准备数据并绑定

根据数据创建图形展现

根据图形对象创建一个图表并绑定到CharControl中

调用函数绘制图表

2.柱状图

准备数据

创建图形展现对象方法

根据图形对象创建图表

3.饼状图

准备数据

创建一个饼状图

设置饼状图显示方式（数值/百分比）

DevExpress使用之ChartControl控件绘制图表（多坐标折线图、柱状图、饼状图）的更多相关文章

随机推荐

热门专题

　　准备数据并绑定

　　根据数据创建图形展现

　　根据图形对象创建一个图表并绑定到CharControl中

　　调用函数绘制图表

　　准备数据

　　创建图形展现对象方法

　　根据图形对象创建图表

　　准备数据

　　创建一个饼状图

　　设置饼状图显示方式（数值/百分比）