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控件包一大重要控件，涵盖了一个画图控件的所有需要输出的效果，并提供了一些特色功能，并直接从流输出不需要产生临时图片文件。本文介绍一些常用的属性以及方法。