Dev系列控件之XtraCharts(一)

悠悠 2022-08-27 00:27 399阅读 0赞

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>