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 < 1)
    {
        foreach (var point in points.GetRange(1, points.Count - 1))
        {
            var myLineSegment = new LineSegment { Point = point };
            myPathSegmentCollection.Add(myLineSegment);
        }
    }
    else
    {
        for (int i = 0; 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;
}

 源碼下載：微信掃描下方二維碼文章末尾獲取鏈接。

                           ​