5分钟教你玩转FlexChart入门绑定数据到图表

发布时间:2017/04/17 00:04 发布者:jeffryli

返回博客中心

概述

本文研究,高性能FlexChart For WinForms强大且灵活的数据绑定,简单和易于使用的API来配置图表。此外,它们为你提供一些基本到复杂的图表类型数据可视化的需求。

步骤如下

第一步,在Visual Studio 中需要创建一个Winform应用程序,在Toolbox中找到FlexChart控件。并拖拽到窗体的设计视图中,如下图:

 

这样我们第一步准备工作完成。

第二步,需要给我们的FlexChart建立数据源,本文我们以List集合为例(DataTable同理),代码参考如下:

/// <summary>

    /// 商品集合表

    /// </summary>

    public class Products

    {

        public Products( string _name,int _price,int _sale,int _cost,int _pvalue)

        {

            ProductName = _name;

            Price = _price;

            Sales = _sale;

            Cost = _cost;

            PValues = _pvalue;

        }

        public string ProductName { get; set;}

        public int Price { get; set; }

        public int Sales { get; set; }

        public int Cost { get; set; }

        public int PValues { get; set; }

    }

并且需要要将集合初始化,参考代码如下:

/// <summary>

        /// 数据源初始化赋值

        /// </summary>

        /// <returns></returns>

        public IList<Products> Init()

        {

            IList<Products> Lists = new List<Products>();

            Products term1 = new Products( "benze", 22, 34, 8, 123 );

            Lists.Add(term1);

            Products term2 = new Products("auto", 14, 21, 7, 83);

            Lists.Add(term2);

            Products term3 = new Products("skeda", 9, 14, 6, 178);

            Lists.Add(term3);

            Products term4 = new Products("nissa", 11, 43, 9, 101);

            Lists.Add(term4);

            Products term5 = new Products("jeep", 16, 24, 10, 223);

            Lists.Add(term5);

            return Lists;

        }

第三步,需要将我们的数据源绑定到FlexChart上,代码参考如下:

flexChart1.DataSource = Init();

第四步,需要对我们的FlexChart设置

            // 清除原绑定的Series,

            flexChart1.Series.Clear();

            // 创建数据序列

            C1.Win.Chart.Series series1 = new C1.Win.Chart.Series();

            C1.Win.Chart.Series series2 = new C1.Win.Chart.Series();

            C1.Win.Chart.Series series3 = new C1.Win.Chart.Series();

            C1.Win.Chart.Series series4 = new C1.Win.Chart.Series();

            // 加载数据序列到徐磊集合中

            flexChart1.Series.Add(series1);

            flexChart1.Series.Add(series2);

            flexChart1.Series.Add(series3);

            flexChart1.Series.Add(series4);

            // 对数据序列重命名,这里指的是图例

            series1.Name = "Price";

            series2.Name = "Sales";

            series3.Name = "Cost";

            series4.Name = "PValues";

            // 绑定X轴和Y轴

            flexChart1.BindingX = "ProductName";

            series1.Binding = "Price";

            series2.Binding = "Sales";

            series3.Binding = "Cost";

            series4.Binding = "PValues";

            // 设置图表展示形式,此处我们选择柱状图

            flexChart1.ChartType = C1.Chart.ChartType.Column;

            // 设置图例显示位置

            flexChart1.Legend.Position = C1.Chart.Position.Right;

第五步。做完以上操作,就可以运行程序,我们简单的FlexChart就完成好了,如图:

这样我们就完成了FlexChart基本数据绑定操作!

本文demo如下:ComponectOne.zip (5.45 mb)

更多资源

如果你对C1Chart感兴趣,请到我们的官网下载最新版本:/developer/componentone-winform/controls/chart

如果你有疑问,可以到GCDN获得技术支持:

http://gcdn.grapecity.com.cn/showforum-68.html

GCDNhttp://gcdn.grapecity.com.cn/

官方网站/developer


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网