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

DevExpress 组件是一个非常丰富和强大的组件，适合各种可视化图形的绘制与展示，在数据分析展示中是个很有帮助的，网上也有很多关于这方面的文章，关于折线图或柱状图的画法，以下是自己在工作中接触到的和自己整理的，直接上代码。

        /// <summary>
        ///折线图
        /// </summary>
        /// <param name="table">数据源</param>
        public void DrawChart(DataTable table)
        {
            this.panel5.Controls.Clear();
            // 线图
            ChartControl charLine = new ChartControl();
            // 总投入
            Series series1 = new Series("车组修时", ViewType.Line);
            series1.DataSource = table;
            charLine.Series.Add(series1);
            SetSeries(series1, "TRAINSETNAME", new string[] { "DAYS" });
            // 检修车间
            Series series2 = new Series("检修车间", ViewType.Line);
            series2.DataSource = table;
            charLine.Series.Add(series2);
            SetSeries(series2, "TRAINSETNAME", new string[] { "I_DAYJX" });
            // 转向架车间
            Series series3 = new Series("转向架车间", ViewType.Line);
            series3.DataSource = table;
            charLine.Series.Add(series3);
            SetSeries(series3, "TRAINSETNAME", new string[] { "I_DAYZXJ" });
            // 设置 chartControl 属性
            SetChartControl(charLine, "检修量统计分析\n\n", " 修时(天): ", "平均修时:" + avgRepairDay + " 天", avgRepairDay);
            // 添加 charControl
            this.panel5.Controls.Add(charLine);
        }

　　

        /// <summary>
        /// 设置Series 的属性
        /// </summary>
        /// <param name="ser"></param>
        /// <param name="argumentDataMember"></param>
        /// <param name="valueDataMember"></param>
        private void SetSeries(Series series, string argumentDataMember, string[] valueDataMember)
        {
            // X 轴类型
            series.ArgumentScaleType = ScaleType.Qualitative;
            //显示的信息和数据
            series.PointOptions.PointView = PointView.Values;
            // X轴显示字段
            series.ArgumentDataMember = argumentDataMember;
            series.ValueScaleType = ScaleType.Numerical;
            // Y轴取值字段
            series.ValueDataMembers.AddRange(valueDataMember);
            // 隐藏线条上的显示内容，线条上的数值
            series.Label.Visible = false;
            // series View 属性
            LineSeriesView lineView = (LineSeriesView)series.View;
            // 线条上点的标识形状
            lineView.LineMarkerOptions.Kind = MarkerKind.Circle;
            // 线条类型,实线,虚线 
            lineView.LineStyle.DashStyle = DashStyle.Solid;
            // 鼠标悬浮提示
            lineView.LineMarkerOptions.Visible = true;
            // 改小圆点到最小值，就不画了
            lineView.LineMarkerOptions.Size = 7;
            // 线条上的标识形状是否需要
            lineView.LineMarkerOptions.Visible = true;
        }

        /// <summary>
        /// 设置 chartControl 属性
        /// </summary>
        /// <param name="chartControl"></param>
        private void SetChartControl(ChartControl chartControl, string title, string valueName, string constantLineTitle, double constantLineValue)
        {
            //Y轴坐标标题
            chartControl.Dock = DockStyle.Fill;
            // 标题
            chartControl.Titles.Clear();
            ChartTitle chartTitle = new ChartTitle();
            chartTitle.Text = title;
            chartTitle.TextColor = Color.Black;
            chartTitle.Font = new Font("宋体", 10);
            chartTitle.Dock = ChartTitleDockStyle.Right;
            chartTitle.Alignment = StringAlignment.Center;
            chartControl.Titles.Add(chartTitle);
            chartControl.Legend.Visible = true;
            // 鼠标移动悬浮窗口提示信息
            ToolTipController toolTip = new ToolTipController();
            chartControl.MouseMove += new MouseEventHandler((obj, arg) =>
            {
                ChartHitInfo hitInfo = chartControl.CalcHitInfo(arg.Location);
                StringBuilder builder = new StringBuilder();
                if (hitInfo.InSeriesLabel || hitInfo.InSeries || hitInfo.InTrendLine || hitInfo.InConstantLine)
                {
                    if ((Series)hitInfo.Series != null)
                    {
                       builder.AppendLine(" 车间:  " + ((Series)hitInfo.Series).Name);
                    }
                }
                if (hitInfo.SeriesPoint != null)
                {
                    builder.AppendLine(" 车组:  " + hitInfo.SeriesPoint.Argument);
                    if (!hitInfo.SeriesPoint.IsEmpty && hitInfo.SeriesPoint.Values != null && hitInfo.SeriesPoint.Values.Length > 0)
                        builder.AppendLine(valueName + hitInfo.SeriesPoint.Values[0]);
                }
                if (builder.Length > 0)
                    toolTip.ShowHint(title + builder.ToString(), chartControl.PointToScreen(arg.Location));
                else
                    toolTip.HideHint();
            });

            // 隐藏提示信息
            chartControl.MouseLeave += new EventHandler((obj, arg) =>
            {
                toolTip.HideHint();
            });

            //X轴刻度间隔设置
            XYDiagram diagram = (XYDiagram)chartControl.Diagram;
            if (diagram == null)
                return;
            // x轴间距
            diagram.AxisX.GridSpacingAuto = false;
            diagram.AxisX.GridSpacing = 200;
            // X轴滚动条
            diagram.AxisX.Range.Auto = false;
            diagram.AxisX.Range.MinValueInternal = 1;
            diagram.AxisX.Range.MaxValueInternal = 14;
            // Y轴滚动条
            diagram.EnableScrolling = true;
            //X轴刻度是否显示
            diagram.AxisX.Tickmarks.Visible = true;
            // X轴文字方向
            diagram.AxisX.Label.Angle = 0;
            diagram.AxisX.Tickmarks.MinorVisible = true;
            diagram.AxisX.MinorCount = 9;
            // 从 x 轴原点开始显示
            diagram.AxisX.Range.ScrollingRange.SideMarginsEnabled = true;
            diagram.AxisX.Range.ScrollingRange.MinValue = 0;
            // 基线信息
            ConstantLine cl = new ConstantLine(constantLineTitle, constantLineValue);
            cl.Color = Color.Red;
            cl.Title.TextColor = Color.Red;
            cl.Title.Font = new Font("宋体", 12F);
            diagram.AxisY.ConstantLines.Add(cl);
        }
2.柱状图的绘制与折线图大致一样，不同的地方在于，柱状图的每一个柱子都对应一个 series 对象，有多少个柱子就要创建多少个 series 对象

        /// <summary>
        /// 创建山积图
        /// </summary>
        /// <param name="table"></param>
        private void CreateChartControl(DataTable table)
        {
            //动态生成一个柱状图表，调用下面的静态方法
            chart = new ChartControl();
            //Y轴坐标标题
            chart.Dock = DockStyle.Fill;
            chart.Legend.Visible = false;
            // 标题
            ChartTitle chartTitle = new ChartTitle();
            chartTitle.Text = "生产线工作量平衡分析";
            chartTitle.TextColor = Color.Black;
            chartTitle.Font = new Font("宋体", 10);
            chartTitle.Dock = ChartTitleDockStyle.Right;
            chartTitle.Alignment = StringAlignment.Center;
            chart.Titles.Clear();
            chart.Titles.Add(chartTitle);
            chart.RuntimeSelection = true;
            // 鼠标热点
            chart.ObjectHotTracked += new HotTrackEventHandler(charBar_ObjectHotTracked);
            // 悬浮提示窗口
            chart.MouseMove += new MouseEventHandler(charBar_MouseMove);
            // 隐藏悬浮提示窗口
            chart.MouseLeave += new EventHandler(charBar_MouseLeave);
            for (int i = 0; i < table.Rows.Count; i++)
            {
                string name = table.Rows[i]["S_WORKORDERNAME"].ToString();
                // 柱状图里的一个柱
                Series series1 = new Series(name, ViewType.Bar);
                var p1 = new SeriesPoint(strTemp, avg);
                p1.Tag = name;
                series1.Points.Add(p1);
                series1.ArgumentScaleType = ScaleType.Qualitative;
                //柱状图显示的信息和数据
                series1.PointOptions.PointView = PointView.SeriesName;
                BarSeriesView bsv = (BarSeriesView)series1.View;
                bsv.BarWidth = 1;
                bsv.Transparency = 5;
                series1.Label.Visible = false;
                chart.Series.Add(series1);
            }

            //X轴刻度间隔设置
            XYDiagram diagram = (XYDiagram)chart.Diagram;
            if (diagram == null)
                return;
            diagram.AxisX.MinorCount = 80;
            // x轴间距
            diagram.AxisX.GridSpacingAuto = false;
            diagram.AxisX.GridSpacing = 200;
            // X轴滚动条
            diagram.AxisX.Range.Auto = false;
           // if(diagram.AxisX.Range.MaxValueInternal > diagram.AxisX.Range.MinValueInternal)
            diagram.AxisX.Range.MinValueInternal = 1;
            diagram.AxisX.Range.MaxValueInternal = 25;
            diagram.EnableScrolling = true;
            //X轴刻度是否显示
            diagram.AxisX.Tickmarks.Visible = false;
            // X轴文字方向
            diagram.AxisX.Label.Angle = 10;
            diagram.AxisX.Tickmarks.MinorVisible = true;
            diagram.AxisX.MinorCount = 9;
            // 从 x 轴原点开始显示
            diagram.AxisX.Range.ScrollingRange.SideMarginsEnabled = true;
            diagram.AxisX.Range.ScrollingRange.MinValue = 0;
            diagram.Margins.Left = 35;
            // Y 轴刻度
            diagram.AxisY.Range.Auto = true;
            //diagram.AxisY.Range.MaxValue = 80;
            // 创建车型单选
            CreateRadioButtonForTrain(diagram);
        }

        /// <summary>
        /// 鼠标移动,窗口悬浮
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void charBar_MouseMove(object sender, MouseEventArgs e)
        {
            ChartHitInfo hitInfo = charBar.CalcHitInfo(e.Location);
            StringBuilder builder = new StringBuilder();
            if (hitInfo.SeriesPoint != null)
            {
                builder.AppendLine(" 工序名称:  " + hitInfo.SeriesPoint.Tag.ToString());
                if (!hitInfo.SeriesPoint.IsEmpty)
                    builder.AppendLine(" 修时(小时):  " + hitInfo.SeriesPoint.Values[0]);
            }
            if (builder.Length > 0)
                charBartoolTip.ShowHint("生产线工作量平衡分析 \n\n" + builder.ToString(), charBar.PointToScreen(e.Location));
            else
                charBartoolTip.HideHint();
        }

        /// <summary>
        /// 鼠标离开
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void charBar_MouseLeave(object sender, EventArgs e)
        {
            charBartoolTip.HideHint();
        }

        /// <summary>
        /// 鼠标滑过时,高亮显示
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void charBar_ObjectHotTracked(object sender, HotTrackEventArgs e)
        {
            if (e.Object is Series)
                e.Cancel = false;
            else
                e.Cancel = true;
        }

3. 相关资料

  Devexpress 官网地址： https://www.devexpress.com/

Devexpress 官网文档：https://www.devexpress.com/support/documentation/