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