DevExpress Silverlight DXChart特效总结

1、主题修改

引用 xmlns:core=http://schemas.devexpress.com/winfx/2008/xaml/core

在Grid中添加core:ThemeManager.ApplicationTheme ="DXStyle"

主页引用一次即可

2、坐标倒影

<dxc:ChartControl Name="chartControl1" >

<dxc:ChartControl.Diagram>

<dxc:XYDiagram2D>

<dxc:XYDiagram2D.DefaultPane>

<dxc:Pane MirrorHeight="100" />

</dxc:XYDiagram2D.DefaultPane>

<dxc:XYDiagram2D.Series>

</dxc:XYDiagram2D.Series>

</dxc:XYDiagram2D>

</dxc:ChartControl.Diagram>

<dxc:ChartControl.Legend>

<dxc:Legend />

</dxc:ChartControl.Legend>

</dxc:ChartControl>

3、动态加载效果

<dxc:ChartControl Name="chartControl1"  EnableAnimation="True" >

EnableAnimation：激活动画，True 或者 False。True是激活；False是不激活。

4、透明度

<dxc:BubbleSeries2D DisplayName="Second Series" Transparency="0.1">

Transparency：透明度，范围0~1。0：不透明；1是完全透明。并非所有类型都支持透明

5、饼图空心特效

<dxc:PieSeries2D <!—空心大小，0为实心--> HoleRadiusPercent="20">

6、饼图点击某区域实现分离动态特效滚动特效

在后台代码添加

const int clickDelta = 200;

DateTime mouseDownTime;

bool rotate;

Point startPosition;

bool IsClick(DateTime mouseUpTime)

{

return (mouseUpTime - mouseDownTime).TotalMilliseconds < clickDelta;

}

double CalcAngle(Point p1, Point p2)

{

Point center = new Point(chartControl1.Diagram.ActualWidth / 2, chartControl1.ActualHeight / 2);

Point relativeP1 = new Point(p1.X - center.X, p1.Y - center.Y);

Point relativeP2 = new Point(p2.X - center.X, p2.Y - center.Y);

double angleP1Radian = Math.Atan2(relativeP1.X, relativeP1.Y);

double angleP2Radian = Math.Atan2(relativeP2.X, relativeP2.Y);

double angle = (angleP2Radian - angleP1Radian) * 180 / (Math.PI * 2);

if (angle > 90)

angle = 180 - angle;

else if (angle < -90)

angle = 180 + angle;

return angle;

}

void chart_MouseUp(object sender, MouseButtonEventArgs e)

{

ChartHitInfo hitInfo = chartControl1.CalcHitInfo(e.GetPosition(chartControl1));

rotate = false;

if (hitInfo == null || hitInfo.SeriesPoint == null || !IsClick(DateTime.Now))

return;

double distance = PieSeries.GetExplodedDistance(hitInfo.SeriesPoint);

Storyboard storyBoard = new Storyboard();

DoubleAnimation animation = new DoubleAnimation();

animation.Duration = new Duration(new TimeSpan(0, 0, 0, 0, 300));

animation.To = distance > 0 ? 0 : 0.3;

storyBoard.Children.Add(animation);

Storyboard.SetTarget(animation, hitInfo.SeriesPoint);

Storyboard.SetTargetProperty(animation, new PropertyPath(PieSeries.ExplodedDistanceProperty));

storyBoard.Begin();

}

void chart_MouseDown(object sender, MouseButtonEventArgs e)

{

mouseDownTime = DateTime.Now;

Point position = e.GetPosition(chartControl1);

ChartHitInfo hitInfo = chartControl1.CalcHitInfo(position);

if (hitInfo != null && hitInfo.SeriesPoint != null)

{

rotate = true;

startPosition = position;

}

void chart_MouseMove(object sender, MouseEventArgs e)

{

Point position = e.GetPosition(chartControl1);

ChartHitInfo hitInfo = chartControl1.CalcHitInfo(position);

if (hitInfo == null)

return;

if (rotate && !IsClick(DateTime.Now))

{

PieSeries2D series = chartControl1.Diagram.Series[0] as PieSeries2D;

double angleDelta = CalcAngle(startPosition, position);

startPosition = position;

}

void ChartsDemoModule_ModuleAppear(object sender, RoutedEventArgs e)

{

chartControl1.Animate();

}

void rblSweepDirection_SelectedIndexChanged(object sender, RoutedEventArgs e)

{

if (chartControl1 != null)

chartControl1.Animate();

}

void chart_QueryChartCursor(object sender, QueryChartCursorEventArgs e)

{

ChartHitInfo hitInfo = chartControl1.CalcHitInfo(e.Position);

if (hitInfo != null && hitInfo.SeriesPoint != null)

e.Cursor = Cursors.Hand;

}

在前台添加

<dxc:ChartControl Name="chartControl1" MouseLeftButtonUp="chart_MouseUp" MouseLeftButtonDown="chart_MouseDown" <!—边框厚度，0是没有-->BorderThickness="0" MouseMove="chart_MouseMove" QueryChartCursor="chart_QueryChartCursor">

7、颜色区分(并非所有有效)

<dxc:PointSeries2D <!—是否区分颜色。True是区分；False是不区分-->ColorEach="True" <!—点的大小-->MarkerSize="20">

8、参数标签

<dxc:ChartControl.CrosshairOptions>

<dxc:CrosshairOptions

<!—X轴坐标值标签-->ShowArgumentLabels="True"

<!—X轴横坐标值基准线-->ShowArgumentLine="True"

<!—Y轴纵坐标值标签-->ShowValueLabels="True"

<!—Y轴横坐标值基准线-->ShowValueLine="True" />

</dxc:ChartControl.CrosshairOptions>

9、是否显示点标签

<dxc:AreaStackedSeries2D DisplayName="First Series" <!—点标签。True为显示；False为不显示-->LabelsVisibility="True">

10、点标签样式

<dxc:SimpleDiagram2D.Series>

<dxc:PieSeries2D HoleRadiusPercent="20" LabelsVisibility="True">

<dxc:PieSeries2D.PointOptions >

<dxc:PointOptions

<!—标签显示内容。ArgumentAndValues表示名称和值-->

PointView="ArgumentAndValues">

<dxc:PointOptions.ValueNumericOptions>

<dxc:NumericOptions

<!—标签值格式。General为一般；Scientific为科学计数法；Percent为百分比；Currency为￥；-->

Format="Percent"

<!—精确小数点尾数。0为整数-->

Precision="2" />

</dxc:PointOptions.ValueNumericOptions>

</dxc:PointOptions>

</dxc:PieSeries2D.PointOptions>

</dxc:SimpleDiagram2D.Series>

</dxc:PieSeries2D>

11、图例格式

<dxc:SimpleDiagram2D.Series>

<dxc:PieSeries2D HoleRadiusPercent="20" LabelsVisibility="True">

<dxc:PieSeries2D.LegendPointOptions>

<dxc:PointOptions PointView="ArgumentAndValues">

<dxc:PointOptions.ValueNumericOptions>

<dxc:NumericOptions Format="Percent" Precision="2"/>

</dxc:PointOptions.ValueNumericOptions>

</dxc:PointOptions>

</dxc:PieSeries2D.LegendPointOptions>

</dxc:SimpleDiagram2D.Series>

</dxc:PieSeries2D >

12、调色板

<dxc:ChartControl.Palette>

<!—不同模板，应用时只能有一个有效-->

<dxc:NatureColorsPalette/>

<dxc:PastelKitPalette/>

<dxc:InAFogPalette/>

<dxc:TerracottaPiePalette/>

<dxc:NorthernLightsPalette/>

<dxc:ChameleonPalette/>

<dxc:TheTreesPalette/>

<dxc:OfficePalette/>

<dxc:DXChartsPalette/>

<dxc:CustomPalette/>

</dxc:ChartControl.Palette>