ChartControl 折線圖 柱狀圖

https://documentation.devexpress.com/#WindowsForms/CustomDocument8117

添加折線圖(柱狀圖)

拖動ChartControl到Form上

在Series Collection中添加Line(或Bar)

DevExpress.XtraCharts.Series series1 = new DevExpress.XtraCharts.Series();
   DevExpress.XtraCharts.LineSeriesView lineSeriesView1 = new DevExpress.XtraCharts.LineSeriesView();

  series1.View = lineSeriesView1;

 

   this.chartControl1.SeriesSerializable = new DevExpress.XtraCharts.Series[] {
        series1,
        series2,
        series3,
        series4};

 

 

Legend

位置

AlignmentHorizontal  設置為Center

AlignmentVertical 設置為BottomOutside

Direction  設置為LeftToRight

  this.chartControl1.Legend.AlignmentHorizontal = DevExpress.XtraCharts.LegendAlignmentHorizontal.Center;
            this.chartControl1.Legend.AlignmentVertical = DevExpress.XtraCharts.LegendAlignmentVertical.BottomOutside;
            this.chartControl1.Legend.Direction = DevExpress.XtraCharts.LegendDirection.LeftToRight;

 

 

可見性 

直接在界面上選中Legend，設置Visibility

 

 

曲線上的點顯示

設置Marker Visibility

  series1.LegendText = "空調用電";
            series1.Name = "Series 1";
            lineSeriesView1.MarkerVisibility = DevExpress.Utils.DefaultBoolean.True;

調整： 可以直接設置series1.Name = "空調用電"; 這樣的話，鼠標在懸浮的時候，顯示某一列的數據時，對應曲線名字可以對應上。無需設置LegendText

 

 坐標軸

https://documentation.devexpress.com/#WindowsForms/CustomDocument5779

坐標軸標題

  DevExpress.XtraCharts.XYDiagram xyDiagram1 = new DevExpress.XtraCharts.XYDiagram();

xyDiagram1.AxisX.Title.Text = "時間";
            xyDiagram1.AxisX.Title.Visibility = DevExpress.Utils.DefaultBoolean.True;
            xyDiagram1.AxisX.VisibleInPanesSerializable = "-1";
            xyDiagram1.AxisY.Title.Text = "用電量(KW·h)";
            xyDiagram1.AxisY.Title.Visibility = DevExpress.Utils.DefaultBoolean.True;
            xyDiagram1.AxisY.VisibleInPanesSerializable = "-1";
            this.chartControl1.Diagram = xyDiagram1;

 

 

坐標軸類型

https://documentation.devexpress.com/#WindowsForms/CustomDocument5799

首先設置曲線的ArgumentScaleType 【橫軸是argument，縱軸是value】

series1.ArgumentScaleType = DevExpress.XtraCharts.ScaleType.DateTime;

設置好之后，坐標軸那邊會自動出現DateTimeScaleOptions的屬性

 橫軸自定義(同比，環比)  series1.ArgumentScaleType = DevExpress.XtraCharts.ScaleType.Qualitative;

 

 

坐標軸范圍

https://documentation.devexpress.com/#WindowsForms/CustomDocument5803

Visual Ranges and Whole Ranges

 

 

坐標軸的滑動

            xyDiagram1.EnableAxisXScrolling = true;
            xyDiagram1.EnableAxisYScrolling = true;

 

            xyDiagram1.AxisY.VisualRange.Auto = false;
            xyDiagram1.AxisY.VisualRange.MaxValueSerializable = "10"; xyDiagram1.AxisY.VisualRange.MinValueSerializable = "0"; xyDiagram1.AxisY.WholeRange.Auto = false; xyDiagram1.AxisY.WholeRange.MaxValueSerializable = "100"; xyDiagram1.AxisY.WholeRange.MinValueSerializable = "0";

Visual Range的范圍小於WholeRange的范圍確保了有滑動的可能

 

獲取坐標軸

XYDiagram diagram = chart.Diagram as XYDiagram;
if (diagram != null) {
    diagram.AxisY.Title.Text = "Population mid-year, millions";
}

 

 

 

圖表的標題

Titles處add一個

            DevExpress.XtraCharts.ChartTitle chartTitle1 = new DevExpress.XtraCharts.ChartTitle();

            chartTitle1.Text = "圖表標題";
            this.chartControl1.Titles.AddRange(new DevExpress.XtraCharts.ChartTitle[] {
            chartTitle1});

 

柱狀圖

設置柱子

選中Series，展開，選中Points，設置Data中的Argument和Value

 

設置數值顯示的位置

case "Top":
label.Position = BarSeriesLabelPosition.Top;

 

 

設置柱子的顏色

每一個柱子的顏色不同:   只需要在run designer界面，設置ColorEach就會自動生成如下代碼

 DevExpress.XtraCharts.SideBySideBarSeriesView sideBySideBarSeriesView1 = new DevExpress.XtraCharts.SideBySideBarSeriesView();

sideBySideBarSeriesView1.ColorEach = true;

series1.View = sideBySideBarSeriesView1;

 

 

 

 動態設置柱狀圖橫軸上的點

chartControl1.Series[0].Points[0].Argument = dateTime.ToString($"yyyy年第{week}周");
chartControl1.Series[0].Points[1].Argument = dateTime.AddDays(-7).ToString($"yyyy年第{week1}周");

 

 

 

 

==========================================

關於刻度

https://documentation.devexpress.com/#WindowsForms/CustomDocument18209

Tickmarks are dashes of different sizes and shapes that mark scale values with the specific step.

There are two types of tickmarks - major tickmarks that are able to display related scale values and minor tickmarks,

which are dashes of a smaller size without text, located between two neighboring major tickmarks (see the figure below).

 

To specify the number of tickmarks, use the ArcScale.MajorTickCount and ArcScale.MinorTickCount properties (the LinearScale.MajorTickCount and LinearScale.MinorTickCount properties for linear scales).

MajorTickCount 控制從頭到尾的大刻度的數量，假如范圍從-20到40。要六等分，那么大刻度的數量是60/6+1=7

MinorTickCount 控制兩個大刻度之間小刻度的數量，，假如小刻度的單位是1的話。那么小刻度的數量是10/1-1=9

 

 

Just like many other gauge elements, tickmarks can be painted using a specific brush object, assigned to the related properties within the ArcScaleComponent.AppearanceMajorTickmark(LinearScaleComponent.AppearanceMajorTickmark) and ArcScaleComponent.AppearanceMinorTickmark (LinearScaleComponent.AppearanceMinorTickmark) property sections.

 

Scales have two sets of properties that manage tickmarks of each type - the ArcScale.MajorTickmark and ArcScale.MinorTickmark properties

(the LinearScale.MajorTickmark and LinearScale.MinorTickmark properties for linear scales). These sections provide access to such properties as:

• IMajorTickmark.ShowTick (IMinorTickmark.ShowTick) - gets or sets if the tickmark dash should be displayed;
• IMajorTickmark.ShapeType (IMinorTickmark.ShapeType) - specifies the shape of the tickmark dash if dashes are displayed;
• IMajorTickmark.ShowText - allows you to display scale values for major tickmarks;
• IMajorTickmark.ShowFirst and IMajorTickmark.ShowLast - gets or sets if tickmarks for minimum and/or maximum values are enabled.