XtraCharts是Dev控件包一大重要控件，涵盖了一个画图控件的所有需要输出的效果，并提供了一些特色功能，并直接从流输出不需要产生临时图片文件。本文介绍一些常用的属性以及方法。
命名空间引用添加
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>
1808
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
