C#使用dev的ChartControl控件绘图

12 篇文章 0 订阅

一、准备数据

画图首先需要有数据,本教程使用Bogus生成测试数据

这个教程建了一个demo类,结构如下所示:  


        public class Demo
        {
            public int? Id { get; set; }
            public string? City { get; set; }
        }

只有两个属性,一个Id,一个City

使用Bogus生成测试数据的代码如下:

            Randomizer.Seed = new Random(8675309);
            var Cities = new[] { "武汉", "长沙", "福州", "南昌", "厦门", "泉州" };
            var orderIds = 0;
            var demoGenerator = new Faker<Demo>("zh_CN")
                .RuleFor(x => x.Id, f => orderIds++)
                .RuleFor(x => x.City, f => f.PickRandom(Cities));
            var demos = demoGenerator.Generate(1000);

指定Randomizer.Seed可以使生成的测试数据不变,具体怎么使用bogus不是本文讨论的内容,暂且不表。

查看生成的内容

本教程假定需求是要统计每个City出现的次数,并绘制图表

对列表中City字段进行去重,可以使用linq中的distinct方法,如下所示:

 var regionList = demos.Select(x => x.City).Distinct().ToList();

查看regionList的结果

然后利用linq中的count方法统计每个City出现的次数,为了方便画图,这里新建了一个DataPoint类

DataPoint类的结构如下所示:

        public class DataPoint
        {
            public string? name { get; set; } // X轴值
            public int? value { get; set; }    // Y轴值
        }

统计各个City出现的次数,并写入DataPoint类列表中,代码如下所示:

            for (int i = 0; i < regionList.Count; i++)
            {
                DataPoint point = new DataPoint();
                point.name = regionList[i];
                int count = demos.Count(x => x.City == regionList[i]);
                point.value = count;
                dataPoints.Add(point);
            }

结果如下图所示:

现在我们已经有画图的数据了,现在就可以正式开始画图了

二、使用ChartControl控件画图

添加控件

为了便于展示画图结果,添加了一个tabcontrol控件并添加了4个tabpage,在每个tabpage上添加对应的控件,并设置Dock为fill,如下图所示:

这种拖拉控件的方式比较简单,但是如果想在运行时生成也是可以的,这里也提供一下运行时生成的示例代码,如下所示:

            ChartControl chart = new ChartControl();
            xtraTabPage1.Controls.Add(chart);
            chart.Dock = DockStyle.Fill;

添加Series

新建Series的代码如下所示:

            // 创建一个折线图Series
            Series series = new Series("折线图", ViewType.Line);
            // 创建一个柱状图Series
            Series series1 = new Series("柱状图", ViewType.Bar);
            // 创建一个饼状图Series
            Series series2 = new Series("饼状图", ViewType.Pie);

将数据添加到Series的方法如下所示:

            // 将数据添加到Series中
            foreach (var dataPoint in dataPoints)
            {
                series.Points.Add(new SeriesPoint(dataPoint.name, dataPoint.value));
                series1.Points.Add(new SeriesPoint(dataPoint.name, dataPoint.value));
                series2.Points.Add(new SeriesPoint(dataPoint.name, dataPoint.value));
            }

将Series添加到ChartControl的方法如下所示:

            // 将Series添加到ChartControl中        
            chartControl1.Series.Add(series);
            chartControl2.Series.Add(series1);
            chartControl3.Series.Add(series2);

自定义图表样式

自定义图表的外观代码如下所示:

            // 自定义图表的外观       
            //将折线图的Legend隐藏
            series.ShowInLegend = false;
            //将柱状图的Legend隐藏
            series1.ShowInLegend = false;
            //显示饼状图的值和百分比
            series2.LegendTextPattern = "{A}: {VP:P2}";

     

添加标题

为图表添加标题的代码如下:

            // 添加标题
            ChartTitle chartTitle = new ChartTitle();
            chartTitle.Text = "City统计折线图";
            chartControl1.Titles.Add(chartTitle);

            ChartTitle chartTitle1 = new ChartTitle();
            chartTitle1.Text = "City统计柱状图";
            chartControl2.Titles.Add(chartTitle1);

            ChartTitle chartTitle2 = new ChartTitle();
            chartTitle2.Text = "City统计饼状图";
            chartControl3.Titles.Add(chartTitle2);

查看绘图结果

绘制的折线图如下图所示:

绘制的柱状图所下图所示:

绘制的饼状图如下所示:

补充

该Demo还有一个数据展示页签,使用了gridcontrol控件这里不展开讲,涉及到的代码如下:

 //新建DataTable类
 DataTable dt = new DataTable();
 //DataTable添加列
 dt.Columns.Add("Name", typeof(string));
 dt.Columns.Add("Value", typeof(int));
 // 将数据添加到Series中
 foreach (var dataPoint in dataPoints)
  {
         series.Points.Add(new SeriesPoint(dataPoint.name, dataPoint.value));
         series1.Points.Add(new SeriesPoint(dataPoint.name, dataPoint.value));
         series2.Points.Add(new SeriesPoint(dataPoint.name, dataPoint.value));
         DataRow dataRow = dt.NewRow();
         dataRow["Name"] = dataPoint.name;
         dataRow["Value"] = dataPoint.value;
         dt.Rows.Add(dataRow);
  }
 //将DataTable绑定到GridControl上
 gridControl1.DataSource = dt;

结果如下图所示:

完整代码

using Bogus;
using DevExpress.XtraBars;
using DevExpress.XtraCharts;
using DevExpress.XtraGrid;
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;

namespace ChartControlDemo
{
    public partial class ToolbarForm1 : DevExpress.XtraEditors.XtraForm
    {
        List<DataPoint> dataPoints = new List<DataPoint>();
        DataTable dt = new DataTable();
        public class Demo
        {
            public int? Id { get; set; }
            public string? City { get; set; }

        }
        public class DataPoint
        {
            public string? name { get; set; } // X轴值
            public int? value { get; set; }    // Y轴值
        }
        public ToolbarForm1()
        {
            InitializeComponent();
        }

        private void barButtonItem1_ItemClick(object sender, ItemClickEventArgs e)
        {
            Randomizer.Seed = new Random(8675309);
            var Cities = new[] { "武汉", "长沙", "福州", "南昌", "厦门", "泉州" };
            var orderIds = 0;
            var demoGenerator = new Faker<Demo>("zh_CN")
                .RuleFor(x => x.Id, f => orderIds++)
                .RuleFor(x => x.City, f => f.PickRandom(Cities));
            var demos = demoGenerator.Generate(1000);
            var regionList = demos.Select(x => x.City).Distinct().ToList();
            for (int i = 0; i < regionList.Count; i++)
            {
                DataPoint point = new DataPoint();
                point.name = regionList[i];
                int count = demos.Count(x => x.City == regionList[i]);
                point.value = count;
                dataPoints.Add(point);
            }

            //开始画图

            // 创建一个折线图Series
            Series series = new Series("折线图", ViewType.Line);
            // 创建一个柱状图Series
            Series series1 = new Series("柱状图", ViewType.Bar);
            // 创建一个饼状图Series
            Series series2 = new Series("饼状图", ViewType.Pie);

            //DataTable添加列
            dt.Columns.Add("Name", typeof(string));
            dt.Columns.Add("Value", typeof(int));

            // 将数据添加到Series中
            foreach (var dataPoint in dataPoints)
            {
                series.Points.Add(new SeriesPoint(dataPoint.name, dataPoint.value));
                series1.Points.Add(new SeriesPoint(dataPoint.name, dataPoint.value));
                series2.Points.Add(new SeriesPoint(dataPoint.name, dataPoint.value));
                DataRow dataRow = dt.NewRow();
                dataRow["Name"] = dataPoint.name;
                dataRow["Value"] = dataPoint.value;
                dt.Rows.Add(dataRow);
            }

            // 将Series添加到ChartControl中        
            chartControl1.Series.Add(series);
            chartControl2.Series.Add(series1);
            chartControl3.Series.Add(series2);

            // 自定义图表的外观       
            //将折线图的Legend隐藏
            series.ShowInLegend = false;
            //将柱状图的Legend隐藏
            series1.ShowInLegend = false;
            //显示饼状图的值和百分比
            series2.LegendTextPattern = "{A}: {VP:P2}";

            // 添加标题
            ChartTitle chartTitle = new ChartTitle();
            chartTitle.Text = "City统计折线图";
            chartControl1.Titles.Add(chartTitle);

            ChartTitle chartTitle1 = new ChartTitle();
            chartTitle1.Text = "City统计柱状图";
            chartControl2.Titles.Add(chartTitle1);

            ChartTitle chartTitle2 = new ChartTitle();
            chartTitle2.Text = "City统计饼状图";
            chartControl3.Titles.Add(chartTitle2);

            //将DataTable绑定到GridControl上
            gridControl1.DataSource = dt;
        }

项目地址

GitHub - Ming-jiayou/ChartControlDemo: A simple example of using dev's ChartControl control in Winforms

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Dev ChartControl 是一个强大的图表控件,可以用于创建饼状图来展示数据。饼状图是一种常用的数据可视化工具,通过将数据按比例呈现在一个圆形饼状图中,直观地展示数据的比例和占比关系。使用 Dev ChartControl 创建饼状图非常简单,首先我们需要提供要展示的数据,然后通过设置控件的属性和样式来定制化饼状图的外观和交互功能。 在使用 Dev ChartControl 创建饼状图时,我们可以设置数据源、数据字段和显示格式,以及自定义饼状图的颜色、标签、标题等元素。我们还可以通过添加交互功能,比如鼠标悬停提示、点击响应等,使饼状图更加生动和易于理解。同时,Dev ChartControl 还支持动态更新数据和实时刷新图表,在数据发生变化时,可以即时更新饼状图,以保持图表的准确性和实用性。 除了基本的数据展示功能,Dev ChartControl 还提供了丰富的自定义选项和扩展功能,比如数据筛选、排序、分组等,可以让用户根据实际需求对数据进行灵活处理和展示。另外,Dev ChartControl 还支持多种数据格式和数据源,包括数据库、文件、API 接口等,可以方便地对接各种数据来源,并快速生成相应的饼状图。总的来说,使用 Dev ChartControl 创建饼状图可以帮助我们清晰地呈现数据,并从中发现规律和趋势,为商业决策和数据分析提供有力支持。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值