初識Devexpress ChartControl 之 動態添加stepline及TextAnnotation

最近在用devexpress 第三方軟件做項目。

devexpress 的控件使用簡單、功能強大、類型豐富、界面優美、擴展性強。今天主要是動態生成了一條StepLine。生成后的效果(能力不強，所以做的比較簡單。)：

首先，建立一個form（普通的或ribbonform均可），然后拖拽一個chartControl到form中。右鍵run warzid。然后將預設的線條刪除（因為我們要動態添加）。

然后查看form代碼。在構造函數中添加方法調用InitCharControl();

然后新建InitCharControl方法，此方法主要功能是生成stepline.

代碼如下：

//init ChartControl1

            //create dataTable
            DataTable dt1 = new DataTable();
            dt1.Columns.Add("count", typeof(long));
            dt1.Columns.Add("step", typeof(string));
            dt1.Columns.Add("pass", typeof(string));
            for (int i = 1; i <= 4; i++)
            {
                DataRow dr = dt1.NewRow();
                dr["count"] = i * 10;
                dr["step"] = "step" + i;
                dr["pass"] = "通過率：" + i * 10 + "%";
                dt1.Rows.Add(dr);
            }

            //create new series 
            Series series2 = new Series();
            StepLineSeriesView stepLine = new StepLineSeriesView();
            stepLine.LineMarkerOptions.Kind = MarkerKind.Square;
            stepLine.LineMarkerOptions.Size = 50;
            series2.View = stepLine;


            chartControl1.Series.Add(series2);

            //datasource bind
            chartControl1.Series[0].ArgumentDataMember = "step";
            chartControl1.Series[0].ValueDataMembers.AddRange(new string[] { "count" });
            chartControl1.DataSource = dt1;
            int count=0;
            foreach(SeriesPoint point in series2.Points )
            {

                SeriesPointAnchorPoint anchorPoint = new SeriesPointAnchorPoint();
                anchorPoint.SeriesPoint = point;

                TextAnnotation txtAnnotation = new TextAnnotation();
                txtAnnotation.RuntimeRotation = true;
                txtAnnotation.RuntimeResizing = true;
                txtAnnotation.RuntimeMoving = true;
                txtAnnotation.RuntimeAnchoring = true;

                txtAnnotation.Text = dt1.Rows[count++]["pass"].ToString();
                txtAnnotation.ShapePosition = new RelativePosition(319.97, -48);
                txtAnnotation.AnchorPoint = anchorPoint;

                chartControl1.AnnotationRepository.Add(txtAnnotation);
            }

2.添加多條stepline

對於chartControl 只有以條數據顯然是沒有用的。因此可能會生成多條線，供對比用。

下面我們就來看看如何生成多條setpline（本例以兩條為例）

其實從上例中可以看到如何把數據源綁定到一條setpline上，當綁定兩條時原理是相同的但是在綁定時就需要將數據源綁定到指定名稱或索引值的setpline上。

只需要將綁定語句改寫為:

chartControl1.Series[lineName].DataSource = dt1;

以下是完整代碼：

     private void InitCharControl(string lineName)
        {
            //init ChartControl1

            #region 手動添加節點、批注

            #endregion
            // get datatable
            DataTable dt1 = InitDataTable();
  

            //create new series 
            Series series2 = new Series(lineName,ViewType.StepLine);
            StepLineSeriesView stepLine = new StepLineSeriesView();
            stepLine.LineMarkerOptions.Kind = MarkerKind.Square;
            stepLine.LineMarkerOptions.Size = 50;
            series2.View = stepLine;

            chartControl1.Series.Add(series2);

            chartControl1.Series[lineName].ArgumentDataMember = "step";
            chartControl1.Series[lineName].ValueDataMembers.AddRange(new string[] { "count" });
            chartControl1.Series[lineName].DataSource = dt1;
            int count = 0;
            foreach (SeriesPoint point in chartControl1.Series[lineName].Points)
            {

                SeriesPointAnchorPoint anchorPoint = new SeriesPointAnchorPoint();
                anchorPoint.SeriesPoint = point;

                TextAnnotation txtAnnotation = new TextAnnotation();
                txtAnnotation.RuntimeRotation = true;
                txtAnnotation.RuntimeResizing = true;
                txtAnnotation.RuntimeMoving = true;
                txtAnnotation.RuntimeAnchoring = true;

                txtAnnotation.Text = dt1.Rows[count++]["pass"].ToString();
                txtAnnotation.ShapePosition = new RelativePosition(319.97, -48);
                txtAnnotation.AnchorPoint = anchorPoint;

                chartControl1.AnnotationRepository.Add(txtAnnotation);
            }
        }

這樣只需遞歸調用該方法並傳遞不同名字，就會生成不同的stepline啦，生成的線系統會自動用不同顏色進行區別，當然你也可以自己改造該函數在構造線時指定顏色，如果有隱藏數據需要綁定到節點上可以利用節點的tag屬性進行綁定。