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>