WinForm 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/
WinForm DevExpress使用之ChartControl控件绘制图表一——基础的更多相关文章
- WinForm DevExpress使用之ChartControl控件绘制图表二——进阶
1. 多坐标折线图 在这个项目中,我需要做不同采集地方和不同数据类型的数据对比,自然而然就用到了多重坐标轴,多重坐标轴可以是多个X轴,也可以是Y轴,它们的处理方式类似.本文通过项目中的实际例子介绍多重 ...
- DevExpress使用之ChartControl控件绘制图表(多坐标折线图、柱状图、饼状图)
最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...
- ZedGrap控件绘制图表曲线
问题描述: 使用C#中ZedGrap控件绘制图表曲线图 ZedGrap 介绍说明: 安装ZedGrap控件 ZedGraph控件dll文件: 添加ZedGraph控件,首先在新建立的C#图像工 ...
- DevExpress ChartControl控件实现图表【转】
1.饼状图图 1.1添加ChartControl控件 在工具箱中找到ChartControl控件,拖到窗口中,创建Pie: 1.2准备数据 private DataTable CreateChartD ...
- 【转】使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)
第一次写博,没什么经验,主要是把最近自己对Dev的一些研究贴出来大家共同探讨,有不足之处望大家帮忙斧正. WebChartControl是DevExpress控件群下的一个Web图表控件,它使用非常的 ...
- Dev之ChartControl控件(二)— 绘制多重坐标图形
有时针对一个ChartControl控件可能要设置多个Y轴,进行显示: 以下举个例子:如在一个Chart中显示多个指标项如图: 首先,读取数据,并对左边的Y轴最大和最小值进行设定 IndexSerie ...
- 张奎师弟参与devexpress chartControl绘图--解决了devexpress的chartControl控件不能添加系列的问题
using DevExpress.XtraCharts; using System; using System.Collections.Generic; using System.ComponentM ...
- 在Winform界面使用自定义用户控件及TabelPanel和StackPanel布局控件
在很多时候,我们做一些非常规化的界面的时候,往往需要创建一些用户控件,在其中绘制好一些基础的界面块,作为后续重复使用的一个单元,用户控件同时也可以封装处理一些简单的逻辑.在开发Winform各种类型项 ...
- 在DevExpress中使用CameraControl控件进行摄像头图像采集
在我们以前的项目了,做摄像头的图片采集,我们一般还是需要做一个封装处理的,在较新版本的DevExpress控件里面,增加了一个CameraControl控件,可以直接调用摄像头显示的,因此也可以做头像 ...
随机推荐
- NLP | 算法 学习资料整理
UPDATE TIME: 2019-12-12 17:06:32 NLP: 对话系统: [ ] https://www.cnblogs.com/jiangxinyang/p/10789512.html ...
- python 线程队列PriorityQueue(优先队列)(37)
在 线程队列Queue / 线程队列LifoQueue 文章中分别介绍了先进先出队列Queue和先进后出队列LifoQueue,而今天给大家介绍的是最后一种:优先队列PriorityQueue,对队列 ...
- LeetCode 14. 最长公共前缀(Longest Common Prefix)
14. 最长公共前缀 14. Longest Common Prefix 题目描述 编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". Lee ...
- MYSQL 八大优化方案
1.选取最适用的字段属性 MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快.因此,在创建表的时候,为了获得更好的性能,我们可以将表中字段的宽度设 ...
- django修改表数据结构后报错的解决办法
1.进入数据库删除app之前创建的表,如果删除有关联的表报错的话可以先删除其他表然后再删除因关联关系删除不了的表 2.删除django_migrations表中对应的app记录,删除命令delete ...
- PAT(B) 1043 输出PATest(Java)统计
题目链接:1043 输出PATest (20 point(s)) 题目描述 给定一个长度不超过 104 的.仅由英文字母构成的字符串.请将字符重新调整顺序,按 PATestPATest- 这样的 ...
- AVR单片机教程——开发环境配置
今天去交大密院参观了设计展,无外乎两个主题:Arduino.Python. 关于Python,我印象最深的是一位Python程序员的话:你要硬核的话,可以去那边看Java. 拜托,都9102年了,Ja ...
- FFmpeg中AVFrame.linesize的含义
在第一节FFmpeg开发教程一.FFmpeg 版 Hello world中遇到一个问题,在保存YUV的时候,粗暴的使用: fwrite(buf, 1, xsize * ysize, f); 方式去拷贝 ...
- Cow Brainiacs
#include<stdio.h> int main() { ,i; scanf("%d %d",&n,&b); ;i<=n;i++) { f*= ...
- Vue.js源码全方位深入解析--学习笔记
模板中的插入变量是如何渲染到DOM上的? initMixin(Vue)->_init->$options-> $mount()当执行该挂载方法时DOM变化 为什么可以通过this访问 ...
