Dev系列控件之XtraCharts(一)

XtraCharts是Dev控件包一大重要控件，涵蓋了一個畫圖控件的全部須要輸出的效果，並提供了一些特點功能，並直接從流輸出不須要產生臨時圖片文件。本文介紹一些經常使用的屬性以及方法。

 

命名空間引用添加

Code
using DevExpress.XtraCharts;
using DevExpress.XtraCharts.Web;
using DevExpress.XtraCharts.Native;
數據綁定 

Code
private void ChartBinding(object sender)
    {
        string Str_SQL = "select top 7 UnitPrice,UnitsInStock,ReorderLevel,ProductID from Products order by ProductID ";
        DataSet DS = DataHandle.ExecuteSQL(Str_SQL);
        WebChartControl1.Series.Clear();
        //定義線型，名稱
        Series S1 = new Series("線條圖測試", ViewType.Line);
        //定義X軸的數據的類型。質量，數字，時間
        S1.ArgumentScaleType = ScaleType.Numerical;
        //定義線條上點的標識形狀
        ((LineSeriesView)S1.View).LineMarkerOptions.Kind = MarkerKind.Circle;
        //線條的類型，虛線，實線
        ((LineSeriesView)S1.View).LineStyle.DashStyle = DashStyle.Solid;
        //S1綁定數據源
        S1.DataSource = DS.Tables[0].DefaultView;
        //S1的X軸數據源字段
        S1.ArgumentDataMember = "UnitPrice";
        //S2的Y軸數據源字段
        S1.ValueDataMembers[0] = "UnitsInStock";
        //柱狀圖演示
        Series S2 = new Series("柱狀圖測試", ViewType.Bar);
        S2.ArgumentScaleType = ScaleType.Numerical;
        S2.DataSource = DS.Tables[0].DefaultView;
        S2.ArgumentDataMember = "UnitPrice";
        S2.ValueDataMembers[0] = "ReorderLevel";
        //光滑線條演示
        Series S3 = new Series("弧度曲線測試", ViewType.Spline);
        S3.ArgumentScaleType = ScaleType.Numerical;
        S3.DataSource = DS.Tables[0].DefaultView;
        S3.ArgumentDataMember = "UnitPrice";
        S3.ValueDataMembers[0] = "UnitsInStock";
        //加入chartcontrol
        WebChartControl1.Series.Add(S1);
        WebChartControl1.Series.Add(S2);
        WebChartControl1.Series.Add(S3);
        //定義chart標題
        ChartTitle CT1 = new ChartTitle();
        CT1.Text = "這是第一個DEMO";
        ChartTitle CT2 = new ChartTitle();
        CT2.Text = "CopyRight By BJYD";
        CT2.TextColor = System.Drawing.Color.Black;
        CT2.Font = new Font("Tahoma", 8);
        //標題對齊方式
        CT2.Dock = ChartTitleDockStyle.Bottom;
        CT2.Alignment = StringAlignment.Far;
        WebChartControl1.Titles.Clear();
        WebChartControl1.Titles.Add(CT1);
        WebChartControl1.Titles.Add(CT2);
        CT2.Indent = 1;
        //座標標題的定義
        //座標值說明的字體尺寸，顏色定義
        ((XYDiagram)WebChartControl1.Diagram).AxisY.Title.Font = new Font("Tahoma", 10);
        ((XYDiagram)WebChartControl1.Diagram).AxisY.Title.TextColor = System.Drawing.Color.Red;
        ((XYDiagram)WebChartControl1.Diagram).AxisY.Title.Text = "這是測試的縱座標";
        ((XYDiagram)WebChartControl1.Diagram).AxisY.Title.Visible = true;
        ((XYDiagram)WebChartControl1.Diagram).AxisX.Title.Text = "這是測試的橫座標";
        ((XYDiagram)WebChartControl1.Diagram).AxisX.Title.Visible = true;
        DiagramOwn = (XYDiagram)WebChartControl1.Diagram;
        //圖例的位置定義
        WebChartControl1.Legend.AlignmentHorizontal = LegendAlignmentHorizontal.Right;
        WebChartControl1.Legend.AlignmentVertical = LegendAlignmentVertical.Top;
}
顯示圖標中的數據

Code
private void PerformShowLablesAction()
    {
        foreach (Series serie in WebChartControl1.Series)
        {
            serie.Label.Visible = cbShowData.Checked;
        }
    }
線形爲Bar的時候Label屬性

Code
private void PerformBarLabelPosition()
    {
        foreach (Series serie in WebChartControl1.Series)
        {
            if (serie.Label is SideBySideBarSeriesLabel)
            {
                if (rbbarlabelpostion.SelectedIndex == 0)
                {
                    ((SideBySideBarSeriesLabel)serie.Label).Position = BarSeriesLabelPosition.Top;
                }
                else
                {

                    ((SideBySideBarSeriesLabel)serie.Label).Position = BarSeriesLabelPosition.Center;
                }
            }
        }
    } 
顯示圖標的背景顏色

Code
private void PeformChartAppearance()
    {
        WebChartControl1.AppearanceName = ddlchartappearance.SelectedValue.Trim();
    }
顯示自定義調色板顏色

Code
private void PeformPalette()
    {
        WebChartControl1.PaletteName = ddlpalette.SelectedValue.Trim();
    }
顯示數據的圖例形狀

Code
private void PefromMarkerKindAction()
    {
        foreach (Series serie in WebChartControl1.Series)
        {
            //數據點的視圖形狀包括大小，尺寸，類型等等，只能爲線點類型
            if (serie.View is PointSeriesView)
            {
                PointSeriesView view = (PointSeriesView)serie.View;
                switch (ddlmarkerkind.SelectedValue)
                {
                    case "Circle":
                        view.PointMarkerOptions.Kind = MarkerKind.Circle;
                        break;
                    case "Cross":
                        view.PointMarkerOptions.Kind = MarkerKind.Cross;
                        break;
                    case "Diamond":
                        view.PointMarkerOptions.Kind = MarkerKind.Diamond;
                        break;
                    case "Hexagon":
                        view.PointMarkerOptions.Kind = MarkerKind.Hexagon;
                        break;
                    case "InvertedTriangle":
                        view.PointMarkerOptions.Kind = MarkerKind.InvertedTriangle;
                        break;
                    case "Pentagon":
                        view.PointMarkerOptions.Kind = MarkerKind.Pentagon;
                        break;
                    case "Plus":
                        view.PointMarkerOptions.Kind = MarkerKind.Plus;
                        break;
                    case "Square":
                        view.PointMarkerOptions.Kind = MarkerKind.Square;
                        break;
                    case "Star":
                        view.PointMarkerOptions.Kind = MarkerKind.Star;
                        break;
                    case "Triangle":
                        view.PointMarkerOptions.Kind = MarkerKind.Triangle;
                        break;
                }
            }
        }
    }
定義數據的圖例大小

Code
private void PefromMarkerSizeAction()
    {
        int intsize = Convert.ToInt32(ddlmarkersize.SelectedValue.Trim());
        foreach (Series serie in WebChartControl1.Series)
        {
            //數據點的視圖形狀包括大小，尺寸，類型等等，只能爲線點類型
            if (serie.View is PointSeriesView)
            {
                ((PointSeriesView)serie.View).PointMarkerOptions.Size = intsize;
            }
        }
    }
定義數據框角度

Code
private void PerformLabelAngleAction()
    {
        foreach (Series serie in WebChartControl1.Series)
        {
            if (serie.Label is PointSeriesLabel)
            {
                ((PointSeriesLabel)serie.Label).Angle = Convert.ToInt32(ddllableangle.SelectedValue.Trim());
            }
        }
    }
Spline型線條的線張力控制

Code
private void PerformLineTensionAction()
    {
        foreach (Series serie in WebChartControl1.Series)
        {
            if (serie.View is SplineSeriesView)
            {
                ((SplineSeriesView)serie.View).LineTensionPercent = int.Parse(ddlsplinetension.SelectedValue.Trim());
            }
        }
    }
說明框水平位置控制

Code
private void PerformHorAligmentAction()
    {
        switch (ddl_legendhorizontalalign.SelectedValue.Trim())
        {
            case "Center":
                WebChartControl1.Legend.AlignmentHorizontal = LegendAlignmentHorizontal.Center;
                break;
            case "Left":
                WebChartControl1.Legend.AlignmentHorizontal = LegendAlignmentHorizontal.Left;
                break;
            case "LeftOutside":
                WebChartControl1.Legend.AlignmentHorizontal = LegendAlignmentHorizontal.LeftOutside;
                break;
            case "Right":
                WebChartControl1.Legend.AlignmentHorizontal = LegendAlignmentHorizontal.Right;
                break;
            case "RightOutside":
                WebChartControl1.Legend.AlignmentHorizontal = LegendAlignmentHorizontal.RightOutside;
                break;        
        }
    }
說明框豎直位置控制

Code
private void PerformVerAligmentAction()
    {
        switch (ddllegendverticalalign.SelectedValue.Trim())
        {
            case "Bottom":
                WebChartControl1.Legend.AlignmentVertical = LegendAlignmentVertical.Bottom;
                break;
            case "BottomOutside":
                WebChartControl1.Legend.AlignmentVertical = LegendAlignmentVertical.BottomOutside;
                break;
            case "Center":
                WebChartControl1.Legend.AlignmentVertical = LegendAlignmentVertical.Center;
                break;
            case "Top":
                WebChartControl1.Legend.AlignmentVertical = LegendAlignmentVertical.Top;
                break;
            case "TopOutside":
                WebChartControl1.Legend.AlignmentVertical = LegendAlignmentVertical.TopOutside;
                break;
        }
    }
說明框內容位置控制

Code
private void PerformDirectionAction()
    {
        switch (ddllegenddirection.SelectedValue.Trim())
        {
            case "BottomToTop":
                WebChartControl1.Legend.Direction = LegendDirection.BottomToTop;
                break;
            case "LeftToRight":
                WebChartControl1.Legend.Direction = LegendDirection.LeftToRight;
                break;
            case "RightToLeft":
                WebChartControl1.Legend.Direction = LegendDirection.RightToLeft;
                break;
            case "TopToBottom":
                WebChartControl1.Legend.Direction = LegendDirection.TopToBottom;
                break;
        }
    }
說明框最大寬度比例設置

Code
private void PerformMaxHorPrctgAction()
    {
        WebChartControl1.Legend.MaxHorizontalPercentage = int.Parse(ddlmaxhorizontalpercent.SelectedValue.Trim());
    }
說明框最大高度比例設置

Code
private void PerformMaxVerPrctgAction()
    {
        WebChartControl1.Legend.MaxVerticalPercentage = int.Parse(ddlmaxhorizontalpercent.SelectedValue.Trim());
    }
建立第二條X軸，Y軸方法同樣省略

Code
 private void ShowSecondaryAxisX()
    {

        XYDiagram diagram = (XYDiagram)WebChartControl1.Diagram;
        //清除diagram的全部第二X軸
        diagram.SecondaryAxesX.Clear();
        //定義一新X軸
        SecondaryAxisX secondaxisx = new SecondaryAxisX("axisX");
        //找到須要加入第二座標的線條
        Series serie = WebChartControl1.GetSeriesByName(StrSecondSeriese);
        //定義新X軸的標題
        secondaxisx.Title.Text = serie.Name + "Second AxisX";
        secondaxisx.Title.Visible = true;
        //圖標第二X座標集合中加入該新X軸
        diagram.SecondaryAxesX.Add(secondaxisx);
        //替換默認座標軸
        ((XYDiagramSeriesViewBase)serie.View).AxisX = secondaxisx;
    }
清除第二條X軸，Y軸方法同樣省略

Code
 private void HideSecondaryAxisX()
    {
        XYDiagram diagram = (XYDiagram)WebChartControl1.Diagram;
        diagram.SecondaryAxesX.Clear();
    }
改變圖形類型

Code
private void PerformViewTypeAction()
    {
        ViewType viewType = ViewType.Line;
        switch (ddlviewtype.SelectedValue.Trim())
        {
            case "Lines":
                viewType = ViewType.Line;
                break;
            case "Step Lines":
                viewType = ViewType.StepLine;
                break;
            case "Areas":
                viewType = ViewType.Area;
                break;
            case "Stacked Areas":
                viewType = ViewType.StackedArea;
                break;
            case "Full-Stacked Areas":
                viewType = ViewType.FullStackedArea;
                break;
            case "3D Lines":
                viewType = ViewType.Line3D;
                Table5.Visible = true;
                break;
            case "3D Step Lines":
                viewType = ViewType.StepLine3D;
                Table5.Visible = true;
                break;
            case "3D Areas":
                viewType = ViewType.Area3D;
                Table5.Visible = true;
                break;
            case "3D Stacked Areas":
                viewType = ViewType.StackedArea3D;
                Table5.Visible = true;
                break;
            case "3D Full-Stacked Areas":
                viewType = ViewType.FullStackedArea3D;
                Table5.Visible = true;
                break;
            case "Spline":
                viewType = ViewType.Spline;
                break;
            case "Spline Area":
                viewType = ViewType.SplineArea;
                break;
            case "Stacked Spline":
                viewType = ViewType.StackedSplineArea;
                break;
            case "Full-Stacked Spline":
                viewType = ViewType.FullStackedSplineArea;
                break;
            case "Spline 3D":
                viewType = ViewType.Spline3D;
                Table5.Visible = true;
                break;
            case "Spline Area 3D":
                viewType = ViewType.SplineArea3D;
                Table5.Visible = true;
                break;
            case "Stacked Spline 3D":
                viewType = ViewType.StackedSplineArea3D;
                Table5.Visible = true;
                break;
            case "Full-Stacked Spline 3D":
                viewType = ViewType.FullStackedSplineArea3D;
                Table5.Visible = true;
                break;
        }
        Series serie = WebChartControl1.GetSeriesByName(StrSpeSeries);
        serie.ChangeView(viewType);
            byte transparency = 0;
            if (serie.View is Area3DSeriesView || serie.View is AreaSeriesView || serie.View is SplineAreaSeriesView)
            {
                transparency = 135;
            }
            ITransparableView transparableView = serie.View as ITransparableView;
            if (transparableView != null)
                transparableView.Transparency = transparency;
}
控制3D效果時圖形的透明度

Code
private void PerformTransparencyAction()
    {
        byte byttransparency = Convert.ToByte(ddlTransparency.SelectedValue.Trim());
        Diagram3D diagram3D = WebChartControl1.Diagram as Diagram3D;
        if (diagram3D != null)
        {
            for (int i = 0; i < WebChartControl1.Series.Count; i++)
            {
                if (WebChartControl1.Series[i].View is Area3DSeriesView)
                {
                    ((Area3DSeriesView)WebChartControl1.Series[i].View).Transparency = byttransparency;
                }
                else if (WebChartControl1.Series[i].View is AreaSeriesView)
                {
                    ((AreaSeriesView)WebChartControl1.Series[i].View).Transparency = byttransparency;
                }
                else if (WebChartControl1.Series[i].View is SplineAreaSeriesView)
                {
                    ((SplineAreaSeriesView)WebChartControl1.Series[i].View).Transparency = byttransparency;
                }
                else if (WebChartControl1.Series[i].View is Line3DSeriesView)
                {
                    ((Line3DSeriesView)WebChartControl1.Series[i].View).Transparency = byttransparency;
                }
                else if (WebChartControl1.Series[i].View is Bar3DSeriesView)
                {
                    ((Bar3DSeriesView)WebChartControl1.Series[i].View).Transparency = byttransparency;
                }
            }
        }
    }
控制3D效果時圖形視覺角度

Code
private void PerformPerspectiveAngleAction()
    {
        byte byttransparency = Convert.ToByte(ddlTransparency.SelectedValue.Trim());
        Diagram3D diagram3D = WebChartControl1.Diagram as Diagram3D;
        diagram3D.PerspectiveAngle = int.Parse(ddlperspectiveangle.SelectedValue.Trim());
    }
 導出打印相關

Code
<dxm:ASPxMenu SkinID="ChartDemoToolbar" ID="mnuToolbar" runat="server" ClientInstanceName="mnuToolbar" ApplyItemStyleToTemplates="True">
        <Items>
            <dxm:MenuItem Name="mnuPrint" Text="" ToolTip="打印該圖表">
                <Image Url="~/Images/Toolbar/BtnPrint.png" />
            </dxm:MenuItem>
            <dxm:MenuItem Name="mnuSaveToDisk" Text="" ToolTip="導出圖表並保存" BeginGroup="True">
                <Image Url="~/Images/Toolbar/BtnSave.png" />
            </dxm:MenuItem>
            <dxm:MenuItem Name="mnuSaveToWindow" Text="" ToolTip="在線打開圖表">
                <Image Url="~/Images/Toolbar/BtnSaveWindow.png" />
            </dxm:MenuItem>
            <dxm:MenuItem Name="mnuFormat"><Template>
                <dxe:ASPxComboBox runat="server" Width="60px" ValueType="System.String" ID="cbFormat" SelectedIndex="0" ClientInstanceName="cbFormat">
                    <Items>
                        <dxe:ListEditItem Value="pdf" Text="pdf" />
                        <dxe:ListEditItem Value="xls" Text="xls" />
                        <dxe:ListEditItem Value="png" Text="png" />
                        <dxe:ListEditItem Value="jpeg" Text="jpeg" />
                        <dxe:ListEditItem Value="bmp" Text="bmp" />
                        <dxe:ListEditItem Value="tiff" Text="tiff" />
                        <dxe:ListEditItem Value="gif" Text="gif" />
                    </Items>
                </dxe:ASPxComboBox>
            </Template></dxm:MenuItem>
            
        </Items>
        <ClientSideEvents ItemClick="function(s, e) {
    if (e.item.name == 'mnuPrint')
        chart.Print();
    if (e.item.name == 'mnuSaveToDisk')
        chart.SaveToDisk(cbFormat.GetText());
    if (e.item.name == 'mnuSaveToWindow')
        chart.SaveToWindow(cbFormat.GetText());
}" />
    </dxm:ASPxMenu>

XtraCharts是Dev控件包一大重要控件，涵蓋了一個畫圖控件的全部須要輸出的效果，並提供了一些特點功能，並直接從流輸出不須要產生臨時圖片文件。本文介紹一些經常使用的屬性以及方法。