环境:

系统: 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数据可视化-趋势图的更多相关文章

  1. WPF数据可视化-瀑布图

    实现方式一: 将数据(Point[])根据索引沿X轴使用虚拟画布进行绘制,每个数据绘制大小为1px * 1px:最终绘制出的宽度等于数据的总长度.标记并存储当前绘制的图为PreviousBitmap; ...

  2. 手把手教你做一个python+matplotlib的炫酷的数据可视化动图

    1.效果图 2.注意: 上述资料是虚拟的,为了学习制作动图,构建的. 仅供学习, 不是真实数据,请别误传. 当自己需要对真实数据进行可视化时,可进行适当修改. 3.代码: #第1步:导出模块,固定 i ...

  3. 基于matplotlib的数据可视化 - 热图imshow

    热图: Display an image on the axes. 可以用来比较两个矩阵的相似程度 mp.imshow(z, cmap=颜色映射,origin=垂直轴向) imshow( X, cma ...

  4. g2蚂蚁数据可视化折线图,点位坐标label 图形文本设置

    应用g2可视化插件画了个粉丝分析图 要求显示如图所见的节点参数,查看文档蚂蚁图形文本设置,得知需要引入如下代码: chart.point().position('update*praises').la ...

  5. flask+sqlite3+echarts2+ajax数据可视化--静态图

    结构: /www | |-- /static | | | |-- echarts.js(当然还有echarts原dist目录下的文件(夹)) | |-- /templates | | | |-- in ...

  6. Excel应该这么玩——7、我是预言家:绘制趋势图

    让我们先看一个场景:你是公司销售部的员工,你手里有公司最近几年的销售额相关的数据,经理希望你预测下个月的销售额.盯着一堆数据,你或许会想到画一张XY坐标图,然后将每个月份的销售额标定为一个坐标.但是下 ...

  7. 气象netCDF数据可视化分析

    气象netCDF数据可视化分析 2019-09-19 15:34:22 自走棋 阅读数 162更多 分类专栏: web前端   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载 ...

  8. 第六篇:R语言数据可视化之数据分布图(直方图、密度曲线、箱线图、等高线、2D密度图)

    数据分布图简介 中医上讲看病四诊法为:望闻问切.而数据分析师分析数据的过程也有点相似,我们需要望:看看数据长什么样:闻:仔细分析数据是否合理:问:针对前两步工作搜集到的问题与业务方交流:切:结合业务方 ...

  9. JavaScript数据可视化编程学习(一)Flotr2,包含简单的,柱状图,折线图,饼图,散点图

    一.基础柱状图 二.基础的折线图 三.基础的饼图 四.基础的散点图 一.基础柱状图 如果你还没有想好你的数据用什么类型的图表来展示你的数据,你应该首先考虑是否可以做成柱状图.柱状图可以表示数据的变化过 ...

随机推荐

  1. C# 中的委托和事件(一)

    引言 委 托 和 事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真 是太容易了,而没有 ...

  2. uni-app之网络请求

    uni-app之网络请求 一,介绍 uni.request(OBJECT),发起网络请求,以下主要是一些特殊的参数说明,详细的可查看uni-app官网. 1,method的有效值必须是大写,默认GET ...

  3. dicom 影像通信(scu、scp)的c-echo、c-store、c-find、c-move

    本文主要描述,dicom通信的scu,scp的c-echo.c-store.c-find.c-move的使用. DicomServiceIDicomServiceProviderIDicomCStor ...

  4. 基于webpack实现多html页面开发框架一 准备工作

    本系列主要介绍如何基于webpack实现多html页面开发框架,这里不讲webpack的基本概念,废话不多说,直奔主题! 前置条件: 1.安装node环境,自己去官网下载安装 2.新建文件夹webpa ...

  5. Python报错ERROR: Command errored out with exit status 1:

    解决方法: 1.以管理员身份打开cmd 2.pip install robotframework-AutoItLibrary (本次安装时Python基于3.7.3,pip为最新版本) 3.安装成功

  6. Could not resolve dependencies for project, Failed to read artifact descriptor for

    一个可能的原因是由于你的网络从局域网(比如实验室网)切换到了代理网络(比如校园公共网). 方法一:重新切换到非代理网络 办法二:repository 或 dependency 名称不对,比如新repo ...

  7. luogu P2343 宝石管理系统 |分块+堆

    题目描述 GY君购买了一批宝石放进了仓库.有一天GY君心血来潮,想要清点他的宝石,于是把m个宝石都取出来放进了宝石管理系统.每个宝石i都有一个珍贵值vi,他希望你能编写程序查找到从大到小第n珍贵的宝石 ...

  8. Mybatis_多表关联查询_resultMap_集合对象_N+1方式实现

    mapper 层 提供 ClazzMapper 和 StudentMapper, ClazzMapper 查询所有班级信息, StudentMapper 根据班级编号查询学生信息. 在 ClazzMa ...

  9. JQuery中操作元素的属性_对象属性

    我们主要是通过attr去获取元素的属性: 看body内容: <body> <p> 账号:<input type="text" id="una ...

  10. table内容保存到Excel中

    @{ Layout = null; } <html> <head> <title></title> </head> <body> ...