Dev ChartControl

1、ChartControl

繪制曲線圖，橫坐標表示距離起點距離，縱坐標表示高程，均為double類型值，定義一個數據源的類。

 /// <summary>
    /// 畫圖控件數據源
    /// </summary>
    public class ChartDatasource
    {
        /// <summary>
        /// 當前位置高度
        /// </summary>
        public double Altitude { get; set; }
 
        /// <summary>
        /// 距起點距離
        /// </summary>
        public double Length { get; set; }
 
        /// <summary>
        /// 坡度
        /// </summary>
        public double Slope { get; set; }
 
    }

 

綁定字段

            this.chartControl_Alt.Series[0].ArgumentDataMember = "Length";
            this.chartControl_Alt.Series[0].ValueDataMembers[0] = "Altitude";
 
            this.chartControl_Slope.Series[0].ArgumentDataMember = "Length";
            this.chartControl_Slope.Series[0].ValueDataMembers[0] = "Slope";

 

構造一<List>，存儲坐標點對，賦值即可，作為數據源。

              var sourcelist=new List<ChartDatasource>();
            sourcelist.Add(new ChartDatasource{Altitude=33,Length=0,Slope=4});
            sourcelist.Add(new ChartDatasource{Altitude=33,Length=0,Slope=4});
            sourcelist.Add(new ChartDatasource{Altitude=33,Length=0,Slope=4});
            sourcelist.Add(new ChartDatasource{Altitude=33,Length=0,Slope=4});
            .....................
            chartControl_Alt.DataSource = sourcelist;
            chartControl_Slope.DataSource = sourcelist;

 

顯示效果如下圖所示，一個數據類，存有三個字段，但綁定的字段不同，顯示不同的結果，作為多個圖表的數據源。

 

2、一個圖上多條曲線

數據源類

/// <summary>
    /// 畫圖控件數據源
    /// </summary>
    public class RChartDataSource
    {
        /// <summary>
        /// 點號
        /// </summary>
        public string ID
        { get; set; }
 
 
        /// <summary>
        /// 源高程值
        /// </summary>
        public double HeightY
        { get; set; }
 
        /// <summary>
        /// 對比高程值
        /// </summary>
        public double HeightD
        {
            get;
            set;
        }
    }

 

之前橫坐標為double類型，則控件自動按值大小顯示在圖表上，這里也可以用string類型為橫坐標，設為ID，依此保存為1,2,3,4....

字段綁定

            this.chartControl1.Series[0].ValueDataMembers[0] = "HeightY";
            this.chartControl1.Series[0].ArgumentDataMember = "ID";
 
            this.chartControl1.Series[1].ValueDataMembers[0] = "HeightD";
            this.chartControl1.Series[1].ArgumentDataMember = "ID";

這里，橫坐標均綁定為一個字段ID,縱坐標為各自的值。

            var sourcelist=new List<RChartDataSource>();
            sourcelist.Add(new RChartDataSource{ID=1，HeightY=35，HeightD=36});
            sourcelist.Add(new RChartDataSource{ID=2，HeightY=35，HeightD=36});
            sourcelist.Add(new RChartDataSource{ID=3，HeightY=35，HeightD=36});
            sourcelist.Add(new RChartDataSource{ID=4，HeightY=35，HeightD=36});
            sourcelist.Add(new RChartDataSource{ID=5，HeightY=35，HeightD=36});
            .....................
            chartControl1.DataSource = sourcelist;

顯示結果如下所示：

若數據源列表發生變化，則可以重新賦值

sourcelist.Add(new (new RChartDataSource{ID=，HeightY=，HeightD=});
chartcontrol.DataSource=null; 
chartcontrol.DataSource=sourcelist;

3、其他

a、我們在圖表上移動或點擊時，需要獲得當前鼠標位置所對應的橫縱坐標值，可以通過以下方式獲得

為ChartControl添加CustomDrawCrosshair事件，事件代碼如下

        double Heng = 0;
        double Zong = 0;
        private void chartControl_Alt_CustomDrawCrosshair(object sender, CustomDrawCrosshairEventArgs e)
        {
            if (chartControl_Alt.DataSource != null&&IsClick)
            {
                var element = e.CrosshairElements;
                if (element.Count() > 0)
                Heng = element.ElementAt(0).SeriesPoint.NumericalArgument;
                Zong = element.ElementAt(0).SeriesPoint.Values[0];
            }
        }

 

CrosshairElements還有很多其他屬性，可進一步研究，可打斷點查看相應屬性。這里提供一種並不完善的方式，需要進一步完善。 

 

b、設置ConstanLine線位置

 var axis = chartControl_Alt.Diagram as DevExpress.XtraCharts.XYDiagram;
 axis.AxisX.ConstantLines[0].AxisValue = Heng;
 axis.AxisX.ConstantLines[0.Visible = true
 axis.AxisX.ConstantLines[1].AxisValue = 160;
 axis.AxisX.ConstantLines[1.Visible = true;

 //這里的兩條線都是垂直於x軸的線，先可以通過代碼添加，也可以提前在Run Designer里面添加好初始設置為不可見。

 

Run Designer里面有很多屬性可進行設置，對控件顯示效果和顯示功能進行設置。