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数据可视化-趋势图的更多相关文章
- WPF数据可视化-瀑布图
实现方式一: 将数据(Point[])根据索引沿X轴使用虚拟画布进行绘制,每个数据绘制大小为1px * 1px:最终绘制出的宽度等于数据的总长度.标记并存储当前绘制的图为PreviousBitmap; ...
- 手把手教你做一个python+matplotlib的炫酷的数据可视化动图
1.效果图 2.注意: 上述资料是虚拟的,为了学习制作动图,构建的. 仅供学习, 不是真实数据,请别误传. 当自己需要对真实数据进行可视化时,可进行适当修改. 3.代码: #第1步:导出模块,固定 i ...
- 基于matplotlib的数据可视化 - 热图imshow
热图: Display an image on the axes. 可以用来比较两个矩阵的相似程度 mp.imshow(z, cmap=颜色映射,origin=垂直轴向) imshow( X, cma ...
- g2蚂蚁数据可视化折线图,点位坐标label 图形文本设置
应用g2可视化插件画了个粉丝分析图 要求显示如图所见的节点参数,查看文档蚂蚁图形文本设置,得知需要引入如下代码: chart.point().position('update*praises').la ...
- flask+sqlite3+echarts2+ajax数据可视化--静态图
结构: /www | |-- /static | | | |-- echarts.js(当然还有echarts原dist目录下的文件(夹)) | |-- /templates | | | |-- in ...
- Excel应该这么玩——7、我是预言家:绘制趋势图
让我们先看一个场景:你是公司销售部的员工,你手里有公司最近几年的销售额相关的数据,经理希望你预测下个月的销售额.盯着一堆数据,你或许会想到画一张XY坐标图,然后将每个月份的销售额标定为一个坐标.但是下 ...
- 气象netCDF数据可视化分析
气象netCDF数据可视化分析 2019-09-19 15:34:22 自走棋 阅读数 162更多 分类专栏: web前端 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载 ...
- 第六篇:R语言数据可视化之数据分布图(直方图、密度曲线、箱线图、等高线、2D密度图)
数据分布图简介 中医上讲看病四诊法为:望闻问切.而数据分析师分析数据的过程也有点相似,我们需要望:看看数据长什么样:闻:仔细分析数据是否合理:问:针对前两步工作搜集到的问题与业务方交流:切:结合业务方 ...
- JavaScript数据可视化编程学习(一)Flotr2,包含简单的,柱状图,折线图,饼图,散点图
一.基础柱状图 二.基础的折线图 三.基础的饼图 四.基础的散点图 一.基础柱状图 如果你还没有想好你的数据用什么类型的图表来展示你的数据,你应该首先考虑是否可以做成柱状图.柱状图可以表示数据的变化过 ...
随机推荐
- Logos讲解--逆向开发
前言 Logos是CydiaSubstruct框架中提供的一组宏定义.利于开发者使用宏进行Hook操作,其语法简单,功能是非常强大且稳定. 详细内容logos语法为http://iphonedevwi ...
- Spring通过IOC帮我们做火鸡
一.IOC--setter注入 1.准备dmo 首先准备一只火鸡 public class Turkey { private int id; private String name; public i ...
- Quantitative proteomics of Uukuniemi virus-host cell interactions reveals GBF1 as proviral host factor for phleboviruses(乌库涅米病毒-宿主细胞互作的定量蛋白质组学揭示了GBF1是个白蛉病毒的前病毒宿主因子)-解读人:谭亦凡
期刊名:Molecular & Cellular Proteomics 发表时间:(2019年12月) IF:4.828 单位:1德国海德堡大学附属医院2德国汉诺威医科大学3德国亥姆霍茲感染研 ...
- JSSDK制作思路
需求:对外提供一个js的SDK.相当于在原有的原生SDK基础上包装一层方法. SDK原生的方法通过JSExport 协议可以让js调用到原生的方法.你可以写一个协议继承JSExport ,将需要对js ...
- 移动前端不得不了解的HTML5 head 头标签 —— link 标签
目录 link 标签 rss订阅 不推荐的link标签 favicon 图标 link 标签 说到 link 标签,估计大家的第一反应和我一样,就是引入外部CSS样式文件的,不错,这是 link 标签 ...
- C++fread小解
std::fread ——C++ 输入/输出库 C 风格 I/O 定义于头文件 <cstdio> std::size_t fread( void* buffer, std::size_t ...
- 记录我的 python 学习历程-Day06 is id == / 代码块 / 集合 / 深浅拷贝
一.is == id 用法 在Python中,id是内存地址, 你只要创建一个数据(对象)那么就会在内存中开辟一个空间,将这个数据临时加载到内存中,这个空间有一个唯一标识,就好比是身份证号,标识这个空 ...
- Python3 类的继承
目录 继承的基本概念 什么是继承 继承有什么用 如何实现继承 初识继承 寻找继承关系 如何寻找继承关系 实例演示 继承背景下的对象属性查找顺序 派生 新式类和经典类 钻石继承 通过继承实现修改json ...
- Day 04 作业
目录 作业 简述Python的五大数据类型的作用.定义方式.使用方法: 数字类型 字符串类型 列表 字典 布尔型 一行代码实现下述代码实现的功能: 写出两种交换x.y值的方式: 一行代码取出nick的 ...
- 垂直margin为什么会重叠
之前看到的post中有这样的一个问题:垂直margin为什么会重叠?我可以说出solve,但是说不出why. 在stackoverflow上找到了一个很好的解释:margin的定义不是让元素移动xxp ...