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/