DevExpress使用教程：使用ChartControl繪制多重坐標(biāo)圖形

---

有時(shí)基于對(duì)一些年份、月份的統(tǒng)計(jì)，需要集成多個(gè)數(shù)值指標(biāo)進(jìn)行分析，因此就需要把多種數(shù)據(jù)放到一個(gè)圖形里面展現(xiàn)，也成為多重坐標(biāo)軸，多重坐標(biāo)軸可以是多個(gè)X軸，也可以是Y軸，它們的處理方式類似。

最新活動(dòng)推薦：年中大促|(zhì)在線訂購(gòu)全場(chǎng)7折起！點(diǎn)擊了解詳情>>

首先我們先來(lái)看一個(gè)圖形例子，我們可以從里面圖形的右邊看到有多個(gè)Y軸，一個(gè)Y軸代表一個(gè)指標(biāo)分析，X軸為月份。

上圖是采用了DevExpress的ChartControl圖表控件來(lái)實(shí)現(xiàn)的，這個(gè)控件提供了SecondaryAxisY對(duì)象來(lái)處理多重坐標(biāo)的問(wèn)題。

1、準(zhǔn)備數(shù)據(jù)并綁定

首先，拖動(dòng)ChartControl控件到Form界面上，然后設(shè)計(jì)好布局。

下面為了測(cè)試準(zhǔn)備了幾項(xiàng)數(shù)據(jù)，綁定在下面列表GridControl對(duì)象里面，然后把數(shù)據(jù)綁定到圖表對(duì)象里面，如下代碼。具體處理的時(shí)候，我們從數(shù)據(jù)庫(kù)獲取對(duì)應(yīng)指標(biāo)的數(shù)據(jù)即可實(shí)現(xiàn)動(dòng)態(tài)綁定。

        /// <summary>
        /// 準(zhǔn)備數(shù)據(jù)內(nèi)容
        /// </summary>
        /// <returns></returns>
        private DataTable CreateData()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add(new DataColumn("類型"));
            dt.Columns.Add(new DataColumn("2005-1月", typeof(decimal)));
            dt.Columns.Add(new DataColumn("2005-2月", typeof(decimal)));
            dt.Columns.Add(new DataColumn("2005-3月", typeof(decimal)));
            dt.Columns.Add(new DataColumn("2005-4月", typeof(decimal)));
            dt.Columns.Add(new DataColumn("2005-5月", typeof(decimal)));
            dt.Columns.Add(new DataColumn("2005-6月", typeof(decimal)));

            dt.Rows.Add(new object[] { "員工人數(shù)", 437, 437, 414, 397, 387, 378 });
            dt.Rows.Add(new object[] { "人均月薪", 3964, 3961, 3979, 3974, 3967, 3972 });
            dt.Rows.Add(new object[] { "成本TEU", 3104, 1339, 3595.8, 3154.5, 2499.8, 3026 });
            dt.Rows.Add(new object[] { "人均生產(chǎn)率", 7.1, 3.06, 8.69, 7.95, 6.46, 8.01 });
            dt.Rows.Add(new object[] { "占2005年3月人數(shù)比例", 1.06, 1.06, 1, 0.96, 0.93, 0.91 });

            return dt;
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            DataTable dt = CreateData();
            this.gridControl1.DataSource = dt;

            CreateChart(dt);
        }

2、創(chuàng)建圖表圖形

        private void CreateChart(DataTable dt)
        {
            #region Series
            //創(chuàng)建幾個(gè)圖形的對(duì)象
            Series series1 = CreateSeries("員工人數(shù)", ViewType.Line, dt, 0);
            Series series2 = CreateSeries("人均月薪", ViewType.Line, dt, 1);
            Series series3 = CreateSeries("成本TEU", ViewType.Line, dt, 2);
            Series series4 = CreateSeries("人均生產(chǎn)率", ViewType.Line, dt, 3);
            Series series5 = CreateSeries("占2005年3月人數(shù)比例", ViewType.Line, dt, 4);
            #endregion

            List<Series> list = new List<Series>() { series1, series2, series3, series4, series5 };
            chartControl1.Series.AddRange(list.ToArray());
            chartControl1.Legend.Visible = false;
            chartControl1.SeriesTemplate.LabelsVisibility = DefaultBoolean.True;

            for (int i = 0; i < list.Count; i++)
            {
                list[i].View.Color = colorList[i];

                CreateAxisY(list[i]);
            }
        }

為了簡(jiǎn)化代碼，并方便處理，上面代碼中提取了兩個(gè)函數(shù)進(jìn)行了獨(dú)立處理。

CreateSeries用于創(chuàng)建一個(gè)典型的圖形，如一條曲線。CreateAxisY用來(lái)創(chuàng)建一個(gè)多重坐標(biāo)軸。

CreateSeries用于創(chuàng)建一個(gè)典型的圖形的源碼如下所示。值得注意的是series.ArgumentScaleType = ScaleType.Qualitative;這句代碼必須設(shè)置，否則默認(rèn)會(huì)把“2005年1月”內(nèi)容轉(zhuǎn)換為日期類型，顯示不恰當(dāng)?shù)膬?nèi)容。

        /// <summary>
        /// 根據(jù)數(shù)據(jù)創(chuàng)建一個(gè)圖形展現(xiàn)
        /// </summary>
        /// <param name="caption">圖形標(biāo)題</param>
        /// <param name="viewType">圖形類型</param>
        /// <param name="dt">數(shù)據(jù)DataTable</param>
        /// <param name="rowIndex">圖形數(shù)據(jù)的行序號(hào)</param>
        /// <returns></returns>
        private Series CreateSeries(string caption, ViewType viewType, DataTable dt, int rowIndex)
        {
            Series series = new Series(caption, viewType);
            for (int i = 1; i < dt.Columns.Count; i++)
            {
                string argument = dt.Columns[i].ColumnName;//參數(shù)名稱
                decimal value = (decimal)dt.Rows[rowIndex][i];//參數(shù)值
                series.Points.Add(new SeriesPoint(argument, value));
            }

            //必須設(shè)置ArgumentScaleType的類型，否則顯示會(huì)轉(zhuǎn)換為日期格式，導(dǎo)致不是希望的格式顯示
            //也就是說(shuō)，顯示字符串的參數(shù)，必須設(shè)置類型為ScaleType.Qualitative
            series.ArgumentScaleType = ScaleType.Qualitative;
            series.LabelsVisibility = DevExpress.Utils.DefaultBoolean.True;//顯示標(biāo)注標(biāo)簽

            return series;
        }

CreateAxisY用來(lái)創(chuàng)建一個(gè)多重坐標(biāo)軸的代碼如下所示，注意這里多重坐標(biāo)，使用了和Series一直的View.Color顏色，這樣方便區(qū)分。

        /// <summary>
        /// 創(chuàng)建圖表的第二坐標(biāo)系
        /// </summary>
        /// <param name="series">Series對(duì)象</param>
        /// <returns></returns>
        private SecondaryAxisY CreateAxisY(Series series)
        {
            SecondaryAxisY myAxis = new SecondaryAxisY(series.Name);
            ((XYDiagram)chartControl1.Diagram).SecondaryAxesY.Add(myAxis);
            ((LineSeriesView)series.View).AxisY = myAxis;
            myAxis.Title.Text = series.Name;
            myAxis.Title.Alignment = StringAlignment.Far; //頂部對(duì)齊
            myAxis.Title.Visible = true; //顯示標(biāo)題
            myAxis.Title.Font = new Font("宋體", 9.0f);

            Color color = series.View.Color;//設(shè)置坐標(biāo)的顏色和圖表線條顏色一致

            myAxis.Title.TextColor = color;
            myAxis.Label.TextColor = color;
            myAxis.Color = color;

            return myAxis;
        }

3、Web界面的展現(xiàn)和代碼處理

本來(lái)以為在Web上，使用DevExpress控件實(shí)現(xiàn)上圖的圖表很麻煩，沒(méi)想到它們的對(duì)象關(guān)系及屬性完全一樣，復(fù)制代碼就基本解決問(wèn)題了，界面代碼變化一點(diǎn)點(diǎn)而已（下載HTML界面代碼）。

后臺(tái)代碼，除了綁定數(shù)據(jù)的代碼略有不同外，其他完全一致。

    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                //D線產(chǎn)量、薪酬、人員、生成率趨勢(shì)圖
                DataTable dt = CreateData();

                //綁定數(shù)據(jù)源到表格里面
                this.ASPxGridView1.DataSource = dt;
                this.ASPxGridView1.DataBind();

                CreateChart(dt);
            }
        }
.............

Web上圖表的效果如下所示，鼠標(biāo)放到圖形節(jié)點(diǎn)上，還有動(dòng)態(tài)提示，很友好。

4、圖表的打印

ChartControl提供了很好的打印功能，使用代碼很簡(jiǎn)單。

        private void btnPrint_Click(object sender, EventArgs e)
        {
            this.chartControl1.ShowPrintPreview(DevExpress.XtraCharts.Printing.PrintSizeMode.Zoom);
        }

得到的效果如下所示，基本上能夠滿足要求了，當(dāng)然復(fù)雜的定制打印需要另外的處理代碼了。

打印也可以使用下面的代碼，效果差不多，但是定制性比較強(qiáng)一點(diǎn)。

轉(zhuǎn)載自http://www.cnblogs.com/wuhuacong/archive/2013/05/13/3076142.html

---