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>