本文主要是介绍DevExpress中使用ChartControl绘制折线图，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、实现效果

①手动创建线性图表（添加图表标题）

②绘制单条线性图（可实现设置X和Y轴名称、绑定数据、缩放、复选框勾选是否显示、查看指定点信息）

③绘制多条线性图可实现设置X和Y轴名称、绑定数据、缩放、复选框勾选是否显示、查看指定点信息）

二、了解认识CharControl控件

可以先手动拖拽一个ChartControl到窗体查看设计效果，了解图表

 点击图表右上角的小三角图标进行设计

三、实现步骤

3.1、编写线性图表的基础内容

        #region   图表基础

        /// <summary>
        /// 创建图表
        /// </summary>
        /// <param name="titleName">图表的标题名称</param>
        /// <param name="chartControlName">图表的名称</param>
        /// <param name="initLocation">图表的初始位置</param>
        /// <param name="InitSize">图表的初始大小</param>
        /// <returns></returns>
        private ChartControl CreateChart(string titleName,string chartControlName, 
            System.Drawing.Point initLocation, System.Drawing.Size InitSize)
        {
            ChartControl chartControl = new ChartControl();
            chartControl.Legend.Name = "Default Legend";
            chartControl.Location = initLocation;
            chartControl.Name = chartControlName;
            chartControl.Size = InitSize;
            chartControl.SeriesSerializable = new DevExpress.XtraCharts.Series[0];

            //添加标题
            if (chartControl.Titles.Count < 1)
            {
                chartControl.Titles.Add(new ChartTitle());
                chartControl.Titles[0].Text = titleName;
            }

            Controls.Add(chartControl);
            chartControl.Show();

            return chartControl;
        }

        /// <summary>
        /// 清空图表
        /// </summary>
        /// <param name="chartControl">图表</param>
        private void ClearChart(ChartControl chartControl)
        {
            if (chartControl != null)
            {
                this.Controls.Remove(chartControl);
                chartControl = null;
                chartControl?.Dispose();
            }

        }

        /// <summary>
        /// 填充数据到线性图表
        /// </summary>
        /// <param name="seriesName">图例类型名称</param>
        /// <param name="curSeriesAllDataDic">图例类型对应的所有数据</param>
        /// <param name="chartControl">线性图表</param>
        /// <param name="viewType">线性图表类型</param>
        private void FillDataToLineChart(string seriesName,
            Dictionary<string, double> curSeriesAllDataDic,
            ChartControl chartControl, ViewType viewType = ViewType.Line)
        {
            if (chartControl == null ||
                curSeriesAllDataDic == null && curSeriesAllDataDic.Count == 0) return;

            //添加一个类型的数据
            Series series = new Series(seriesName, viewType);

            foreach (var item in curSeriesAllDataDic)
            {
                series.Points.Add(new SeriesPoint(item.Key, item.Value));
            }
            chartControl.Series.Add(series);
            //图例的样式设置
            ((LineSeriesView)series.View).MarkerVisibility = DevExpress.Utils.DefaultBoolean.True;
            ((LineSeriesView)series.View).LineMarkerOptions.Kind = MarkerKind.Circle;
            ((LineSeriesView)series.View).LineStyle.DashStyle = DashStyle.Solid;
        }

        /// <summary>
        /// 图表设置
        /// </summary>
        /// <param name="chartControl">chartControl图表</param>
        /// <param name="axisXName">X轴名称</param>
        /// <param name="axisYName">Y轴名称</param>
        private void ChartSettings(ChartControl chartControl, string axisXName, string axisYName)
        {
            //显示图例复选框
            chartControl.Legend.MarkerMode = DevExpress.XtraCharts.LegendMarkerMode.CheckBoxAndMarker;

            XYDiagram diagram = (XYDiagram)chartControl.Diagram;

            if (diagram!=null)
            {
                //允许缩放X轴
                diagram.EnableAxisXZooming = true;
                diagram.AxisX.Title.Visibility = DevExpress.Utils.DefaultBoolean.True;
                diagram.AxisX.Title.Alignment = StringAlignment.Far;
                diagram.AxisX.Title.Text = axisXName;
                //要开启滚动条需设置自动范围为false
                diagram.AxisX.VisualRange.Auto = false;
                //启用X轴滚动条
                diagram.EnableAxisXScrolling = true;
                在不拉动滚动条的时候，X轴显示的数据个数（固定X轴的长度）
                //diagram.AxisX.WholeRange.SetMinMaxValues("2021/08/01", "2021/08/07");

                // Define the whole range for the Y-axis. 
                diagram.AxisY.WholeRange.Auto = false;
                diagram.AxisY.WholeRange.SetMinMaxValues(10, 70);


                //允许缩放Y轴
                diagram.EnableAxisYZooming = true;
                diagram.AxisY.Title.Visibility = DevExpress.Utils.DefaultBoolean.True;
                diagram.AxisY.Title.Alignment = StringAlignment.Far;
                diagram.AxisY.Title.Text = axisYName;

                //chartControl.CrosshairOptions.ShowArgumentLabels = true;
                //chartControl.CrosshairOptions.ShowValueLine = true;
            }
        }

        //初始化图表
        private void InitChartSettings(ChartControl chartControl, string axisXName, string axisYName)
        {
            XYDiagram diagram = (XYDiagram)chartControl.Diagram;

            if (diagram != null)
            {
                //允许缩放X轴
                diagram.EnableAxisXZooming = true;
                diagram.AxisX.Title.Visibility = DevExpress.Utils.DefaultBoolean.True;
                diagram.AxisX.Title.Alignment = StringAlignment.Far;
                diagram.AxisX.Title.Text = axisXName;
                //要开启滚动条需设置自动范围为false
                diagram.AxisX.VisualRange.Auto = false;
                //启用X轴滚动条
                diagram.EnableAxisXScrolling = true;
 
                //在不拉动滚动条的时候，X轴显示的数据个数（固定X轴的长度）
                diagram.AxisX.WholeRange.SetMinMaxValues(Convert.ToDateTime("2021/08/01"), Convert.ToDateTime("2021/08/07"));

                // Define the whole range for the Y-axis. 
                diagram.AxisY.WholeRange.Auto = false;
                diagram.AxisY.WholeRange.SetMinMaxValues(10, 70);


                //允许缩放Y轴
                diagram.EnableAxisYZooming = true;
                diagram.AxisY.Title.Visibility = DevExpress.Utils.DefaultBoolean.True;
                diagram.AxisY.Title.Alignment = StringAlignment.Far;
                diagram.AxisY.Title.Text = axisYName;

                //chartControl.CrosshairOptions.ShowArgumentLabels = true;
                //chartControl.CrosshairOptions.ShowValueLine = true;
            }
        }


        #endregion

3.2、线性图表【单线】创建

        //创建线性图表【单线】
        private void simpleButton1_Click(object sender, EventArgs e)
        {
            //0-清空图表
            ClearChart(chartControl1);
            //1-创建图表
            chartControl1=CreateChart("线性图表","LineChart",new Point(10,12),new Size(600,360));

            /*2-填充数据到图表*/
            //模拟数据
            Dictionary<string,Dictionary<string, double>> needFillDataDic = 
                new Dictionary<string, Dictionary<string, double>>();

            Dictionary<string, double> tmpADic = new Dictionary<string, double>();
            tmpADic.Add("2021/08/01", 36.5);
            tmpADic.Add("2021/08/02", 22.3);
            tmpADic.Add("2021/08/03", 21.1);
            tmpADic.Add("2021/08/04", 25.8);
            tmpADic.Add("2021/08/05", 32.3);
            tmpADic.Add("2021/08/06", 42.0);
            tmpADic.Add("2021/08/07", 35.5);
          
            needFillDataDic.Add("类型A", tmpADic);
           
           
            //填充数据
            if (needFillDataDic!=null && needFillDataDic.Count>0)
            {
                foreach (var item in needFillDataDic)
                {
                    string seriesName = item.Key;
                    Dictionary<string, double> curSeriesDataDic = item.Value;

                    FillDataToLineChart(seriesName, curSeriesDataDic, chartControl1);


                }
            }
            

            //3-图表设置
            ChartSettings(chartControl1, "日期", "数值（单位：个）");
        }

3.3、线性图表【多线】创建

        //创建线性图表【多线】
        private void simpleButton2_Click(object sender, EventArgs e)
        {
            //0-清空图表
            ClearChart(chartControl1);
            //1-创建图表
            chartControl1 = CreateChart("线性图表", "LineChart", new Point(10, 12), new Size(600, 360));

            /*2-填充数据到图表*/
            //模拟数据
            Dictionary<string, Dictionary<string, double>> needFillDataDic =
                new Dictionary<string, Dictionary<string, double>>();

            Dictionary<string, double> tmpADic = new Dictionary<string, double>();
            tmpADic.Add("2021/08/01", 36.5);
            tmpADic.Add("2021/08/02", 22.3);
            tmpADic.Add("2021/08/03", 21.1);
            tmpADic.Add("2021/08/04", 25.8);
            tmpADic.Add("2021/08/05", 32.3);
            tmpADic.Add("2021/08/06", 42.0);
            tmpADic.Add("2021/08/07", 35.5);
            needFillDataDic.Add("类型A", tmpADic);

            Dictionary<string, double> tmpBDic = new Dictionary<string, double>();
            tmpBDic.Add("2021/08/01", 66.5);
            tmpBDic.Add("2021/08/02", 51.2);
            tmpBDic.Add("2021/08/03", 44.6);
            tmpBDic.Add("2021/08/04", 35.8);
            tmpBDic.Add("2021/08/05", 42.3);
            tmpBDic.Add("2021/08/06", 32.0);
            tmpBDic.Add("2021/08/07", 55.5);
            needFillDataDic.Add("类型B", tmpBDic);


            //填充数据
            if (needFillDataDic != null && needFillDataDic.Count > 0)
            {
                foreach (var item in needFillDataDic)
                {
                    string seriesName = item.Key;
                    Dictionary<string, double> curSeriesDataDic = item.Value;

                    FillDataToLineChart(seriesName, curSeriesDataDic, chartControl1);

                }
            }


            //3-图表设置
            ChartSettings(chartControl1, "日期", "数值（单位：个）");
        }

四、官网参考资料

①官网线性图表示例

②官网手册

③官网ChartControl

④AxisBase.Range Property | Cross-Platform Class Library | DevExpress Documentation

五、其他参考资料

①DevExpress 折线图和柱状图的绘制与数据绑定

②DEV控件之ChartControl 属性设置

③Dev中ChartControl添加限定线

④Dev中ChartControl——属性熟悉与简单应用

这篇关于DevExpress中使用ChartControl绘制折线图的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！