WPF数据可视化-趋势图

环境：

系统： Window 7以上；

工具：VS2013及以上。

研发语言及工程：

C# WPF 应用程序

效果：

​

​

简介：

不需要调用第三方Dll， 仅仅在WPF中使用贝塞尔曲线，不到500行代码构建自定义的趋势图效果。

原理：

WPF中路径Path的Data值为PathGeometry。如：

  <Path x:Name="PathData1" Stroke="#FFEE4141" StrokeThickness="2">

       <Path.Fill>

            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.5">

                <GradientStop Color="#FFEE4141" Offset="0"/>

                <GradientStop Color="#7F031528" Offset="1"/>

            </LinearGradientBrush>

       </Path.Fill>

       <Path.Data>

            <PathGeometry x:Name="PgData1"/>

       </Path.Data>

  </Path>

PathGeometry.Figures的Value类型为PathFigureCollection；即PathFigure对象的集合，将一系列的Point数据已构建Beizer曲线的形式处理后生成PathFigureCollection对象，最终以PathGeometry对象赋值给Path.Data即可实现如上述所示的效果。

主要处理函数：

private void SetPathData(PathGeometry geo, List<Point> points)

{

    var myPathFigure = new PathFigure { StartPoint = points.FirstOrDefault() };

    var myPathSegmentCollection = new PathSegmentCollection();

    var beizerSegments = BeizerUtils.InterpolatePointWithBeizerCurves(points, false);

    if (beizerSegments == null || beizerSegments.Count < )

    {

        foreach (var point in points.GetRange(, points.Count - ))

        {

            var myLineSegment = new LineSegment { Point = point };

            myPathSegmentCollection.Add(myLineSegment);

        }

    }

    else

    {

        for (int i = ; i < beizerSegments.Count; i++)

        {

            BeizerCurveSegment beizerCurveSegment = beizerSegments[i];

            PathSegment segment = new BezierSegment

            {

                Point1 = beizerCurveSegment.FirstControlPoint,

                Point2 = beizerCurveSegment.SecondControlPoint,

                Point3 = beizerCurveSegment.EndPoint

            };

            myPathSegmentCollection.Add(segment);

        }

    }

    myPathFigure.Segments = myPathSegmentCollection;

    var myPathFigureCollection = new PathFigureCollection { myPathFigure };

    geo.Figures = myPathFigureCollection;

}

 源码下载：微信扫描下方二维码文章末尾获取链接。

​

WPF数据可视化-趋势图的相关教程结束。