WinForm DevExpress使用之ChartControl控件繪制圖表二——進階

1. 多坐標折線圖

在這個項目中，我需要做不同采集地方和不同數據類型的數據對比，自然而然就用到了多重坐標軸，多重坐標軸可以是多個X軸，也可以是Y軸，它們的處理方式類似。本文通過項目中的實際例子介紹多重Y軸的形式，希望給大家有一個很好的參考。ChartControl圖表控件提供了SecondaryAxisY對象來處理多重坐標的問題。CreateAxisY用來創建一個多重坐標軸的代碼如下所示，注意這里多重坐標，使用了和Series一樣的View.Color顏色，這樣方便區分。

/// <summary>
/// 創建圖表的第二坐標系
/// </summary>
/// <param name="series">Series對象</param>
/// <returns></returns>
private SecondaryAxisY CreateAxisY(Series series)
{
    SecondaryAxisY myAxis = new SecondaryAxisY(series.Name);
    ((XYDiagram)chartControl1.Diagram).SecondaryAxesY.Add(myAxis);
    //判斷圖形對象是柱狀圖還是折線圖
    string type = series.View.GetType().ToString();
    if (type == "DevExpress.XtraCharts.SideBySideBarSeriesView")
    {
        ((BarSeriesView)series.View).AxisY = myAxis;
    }
    else
    {
        ((LineSeriesView)series.View).AxisY = myAxis;
    }
    myAxis.Title.Text = series.Name;
    myAxis.Title.Alignment = StringAlignment.Far; //頂部對齊
    myAxis.Title.Visible = true; //顯示標題
    myAxis.Title.Font = new Font("宋體", 9.0f);
    Color color = series.View.Color;//設置坐標的顏色和圖表線條顏色一致
    myAxis.Title.TextColor = color;
    myAxis.Label.TextColor = color;
    myAxis.Color = color;
    return myAxis;
}

根據圖形對象創建圖表時調用CreateAxisY方法

/// <summary>
/// 根據圖形對象創建一個圖表
/// </summary>
/// <param name="chartControl">圖表綁定控件</param>
/// <param name="list">圖表中的圖形展現</param>
/// <returns></returns>
private void CreateChart(ChartControl chartControl, List<Series> list)
{
    chartControl.Series.AddRange(list.ToArray());
    chartControl.Legend.Visible = false;
    chartControl.SeriesTemplate.LabelsVisibility = DefaultBoolean.False;
    //XYDiagram diagram = (XYDiagram)chartControl1.Diagram;
    //diagram.AxisX.DateTimeMeasureUnit = DateTimeMeasurementUnit.Second;
    //diagram.AxisX.DateTimeOptions.Format = DateTimeFormat.Custom;
    //diagram.AxisX.DateTimeOptions.FormatString = "yyyy-MM-dd HH:mm:ss";
    /*------------------------------------新增--------------------------------*/
    //刪除之前的第二坐標系，如果不刪除會一直重復添加
    ((XYDiagram)chartControl1.Diagram).SecondaryAxesY.Clear();
    for (int i = 0; i < list.Count; i++)
    {
        list[i].View.Color = Color.FromArgb(rand.Next(0, 255), rand.Next(0, 255), rand.Next(0, 255));
        CreateAxisY(list[i]);
    }
}

2. 折線圖，柱狀圖設置縮放與滾動，並設置每頁顯示條數

//設置滾動條
int cnt = 20;
DevExpress.XtraCharts.XYDiagram xyDiagram1 = (XYDiagram)chartControl1.Diagram;
xyDiagram1.AxisX.Range.Auto = false; //要開啟滾動條必須將其設置為false
xyDiagram1.AxisX.Range.MaxValueInternal = 30.5D > (cnt + 1) ? (cnt + 1) : 30.5D;//在不拉到滾動條的時候，X軸顯示多個值，既固定的X軸長度。
xyDiagram1.AxisX.Range.MinValueInternal = -0.5D;
xyDiagram1.AxisX.Range.ScrollingRange.Auto = false;
xyDiagram1.AxisX.Range.ScrollingRange.MaxValueSerializable = (cnt + 1).ToString();//整個X軸最多顯示多多少個值
xyDiagram1.AxisX.Range.ScrollingRange.MinValueSerializable = "0";
xyDiagram1.AxisX.Range.ScrollingRange.SideMarginsEnabled = true;//是否從X軸原點開始顯示
xyDiagram1.AxisX.Range.SideMarginsEnabled = false;
xyDiagram1.AxisX.VisibleInPanesSerializable = "-1";
xyDiagram1.EnableAxisXScrolling = true;//啟用滾動條

 

3. 柱狀圖設置Label樣式

BarSeriesLabel label = (BarSeriesLabel)series.Label;
label.Position = BarSeriesLabelPosition.Top;
label.TextPattern = "{A}: {VP:P2}";

4. 餅狀圖設置顯示樣式

DevExpress設置顯示圖表數據的樣式是使用TextPattern來實現的，比如Label以及Legend等都是通過TextPattern或Pattern來設置的。

//設置Legend的樣式
_pieSeries.LegendPointOptions.PointView = PointView.ArgumentAndValues;
_pieSeries.LegendPointOptions.Pattern = "{A}: {VP:P2}";
//設置Label的樣式
label.Position = PieSeriesLabelPosition.Inside;
label.TextPattern = "{A}: {VP:P2}";

5. 設置餅狀圖數據顯示方式（數值/百分比）

public static class ExtensionClass
{
/// <summary>
/// 設置餅狀Series顯示方式（值/百分比）
/// </summary>
/// <param name="series">Series</param>
public static void SetPiePercentage(this Series series)
{
    if (series.View is PieSeriesView)
    {
        //設置為值
        //((PiePointOptions)series.PointOptions).PercentOptions.ValueAsPercent = false;
        //((PiePointOptions)series.PointOptions).ValueNumericOptions.Format = NumericFormat.Number;
        //((PiePointOptions)series.PointOptions).ValueNumericOptions.Precision = 0;
        //設置為百分比
        ((PiePointOptions)series.PointOptions).PercentOptions.ValueAsPercent = true;
        ((PiePointOptions)series.PointOptions).ValueNumericOptions.Format = NumericFormat.Percent;
        ((PiePointOptions)series.PointOptions).ValueNumericOptions.Precision = 0;
        }
    }
}