基于WPF实现带明细的环形图表

目录
  • 效果
  • 大体思路
  • 圆弧部分
  • Popup明细部分
    • 椭圆
    • 折线
    • Popup的定位

效果

明细用Popup实现的,录gif时,Popup显示不出来,不知道为什么,所以静态图凑合看吧

大体思路

图表使用Arc+Popup实现

图表分为两部分,一是环形部分,一是标注的明细部分.

环形部分使用Arc图形表示.需要注意这个Arc是Blend里的图形.用Blend建项目的话可以直接用,使用VS建项目需要添加引用 Microsoft.Expression.Drawing 在引用管理器=>程序集=>扩展 下(前提是已经安装了Blend)

明细部分使用Popup控件,IsOpen属性绑定到Arc的IsMouseOver,也就是鼠标进入圆弧的时候,Popup就打开显示.

Popup内部一个椭圆控件当作背景,一个文字显示,一个折线虚线化当作指针

然后就是把Popup定位到对应圆弧合适的位置去显示(这里取的是圆弧的中间)

比较抱歉的是样式比较丑陋,忽略吧,重点看定位.

圆弧部分

Arc有两个重要的属性:StartAngle起始角度和EndAngle终结角度.这两个属性决定了圆弧占所在圆环的比例.

每一个数据项就对应一个圆弧,把所有圆弧都放到一个容器里,首尾相连

数据项的总和为100,那么所有圆弧也就组成一个完整的圆环.

Popup明细部分

明细部分分为四种,见图

椭圆

从图可知,作为背景的椭圆分为两种情况,小于180度,椭圆靠容器的右边对齐,大于180度,靠容器的左边对齐

也就是代码的这部分:

Ellipse ell = new Ellipse() { Fill = brush };
//中间点角度小于180 明细靠右显示 否则靠左显示
Grid detailGrid = new Grid() { Width = _popupHeight, HorizontalAlignment = HorizontalAlignment.Right };
if (middleAngle > 180)
{
    detailGrid.HorizontalAlignment = HorizontalAlignment.Left;
}

折线

折线是分为四种,每一个角度区间都对应一种

private Polyline GetPopupPolyline(double middleAngle)
{
    Polyline pLine = new Polyline() { Stroke = new SolidColorBrush(Color.FromRgb(0, 0, 0)), StrokeDashArray = new DoubleCollection(new double[] { 5, 2 }) };
    double x1 = 0, y1 = 0;
    double x2 = 0, y2 = 0;
    double x3 = 0, y3 = 0;
    if (middleAngle > 0 && middleAngle <= 90)
    {
        x1 = 0; y1 = _popupHeight;
        x2 = _popupWidth / 2; y2 = _popupHeight;
        x3 = _popupWidth * 3 / 4; y3 = _popupHeight / 2;
    }
    if (middleAngle > 90 && middleAngle <= 180)
    {
        x1 = 0; y1 = 0;
        x2 = _popupWidth / 2; y2 = 0;
        x3 = _popupWidth * 3 / 4; y3 = _popupHeight / 2;
    }
    if (middleAngle > 180 && middleAngle <= 270)
    {
        x1 = _popupWidth; y1 = 0;
        x2 = _popupWidth / 2; y2 = 0;
        x3 = _popupWidth / 4; y3 = _popupHeight / 2;
    }
    if (middleAngle > 270 && middleAngle <= 360)
    {
        x1 = _popupWidth; y1 = _popupHeight;
        x2 = _popupWidth / 2; y2 = _popupHeight;
        x3 = _popupWidth / 4; y3 = _popupHeight / 2;
    }
    pLine.Points.Add(new Point(x1, y1));
    pLine.Points.Add(new Point(x2, y2));
    pLine.Points.Add(new Point(x3, y3));
    return pLine;
}

Popup的定位

首先以0-90度为例,说明一些基本的东西,见图

首先Popup默认的位置,都是在它容器的左下方的,Popup的左上角和容器的左下角重合.

现在要做的是Popup标记为红点的位置,和圆环上标记为红点的位置重合.

先来回顾一下小时候学过的公式:

1.直角三角形 a=r*sinA

2.勾股定理 c^2=a^2+b^2 b=Sqrt(c^2-a^2)

上图的直角三角形,角A的对边为a,临边为b,斜边为c.显然c边于圆的半径r相等.注意:因为圆弧是有厚度的,所以取r的时候要减去二分之一的圆弧厚度.

角A是可以通过90度减去圆弧的对应的角度求出来的,也就是sinA的值已知了,那么就可以求出a和b的长度,然后就可以去移动Popup了

一.0-90度

X轴:1.向右移动二分之一个容器的width 2.向右移动一个b的距离

Y轴:1.向上移动二分之一个容器的height 2.向上移动一个Popup的height 3.向上移动一个a的距离

二.90-180度

X轴:1.向右移动二分之一个容器的width 2.向右移动一个a的距离

Y轴:1.上移二分之一个圆弧的Thickness,以保证标记的起点在圆弧的中央 2.上移一个(r-b)的距离

三.180-270度

X轴:1.向左移动一个b的距离

Y轴:1.上移二分之一个圆弧的Thickness,以保证标记的起点在圆弧的中央 2.上移一个(r-a)的距离

四.270-360度

X轴:1.向左移动一个a的距离

Y轴:1.向上移动二分之一个容器的height 2.向上移动一个Popup的height 3.向上移动一个b的距离

代码部分

private Popup GetPopup(double middleAngle)
{
    /*
     * 生成popup
     * 设置popup的offset 让标记线的起点 对应到圆弧的中间点
     */
    Popup popup = new Popup() { Width = _popupWidth, Height = _popupHeight, AllowsTransparency = true, IsHitTestVisible = false };
    //直角三角形 a=r*sinA 勾股定理 c^2=a^2+b^2 b=Sqrt(c^2-a^2)
    double r = _chartSize / 2 - _arcThickness / 2;
    double offsetX = 0, offsetY = 0;
    if (middleAngle > 0 && middleAngle <= 90)
    {
        double sinA = Math.Sin(Math.PI * (90 - middleAngle) / 180);
        double a = r * sinA;
        double c = r;
        double b = Math.Sqrt(c * c - a * a);
        offsetX = _chartSize / 2 + b;
        offsetY = -(_chartSize / 2 + _popupHeight + a);
    }
    if (middleAngle > 90 && middleAngle <= 180)
    {
        double sinA = Math.Sin(Math.PI * (180 - middleAngle) / 180);
        double a = r * sinA;
        double c = r;
        double b = Math.Sqrt(c * c - a * a);
        offsetX = _chartSize / 2 + a;
        offsetY = -(_arcThickness / 2 + (r - b));
    }
    if (middleAngle > 180 && middleAngle <= 270)
    {
        double sinA = Math.Sin(Math.PI * (270 - middleAngle) / 180);
        double a = r * sinA;
        double c = r;
        double b = Math.Sqrt(c * c - a * a);
        offsetX = -_popupWidth + (r - b) + _arcThickness / 2;
        offsetY = -(_arcThickness / 2 + (r - a));
    }
    if (middleAngle > 270 && middleAngle <= 360)
    {
        double sinA = Math.Sin(Math.PI * (360 - middleAngle) / 180);
        double a = r * sinA;
        double c = r;
        double b = Math.Sqrt(c * c - a * a);
        offsetX = -_popupWidth + (r - a) + _arcThickness / 2;
        offsetY = -(_chartSize / 2 + _popupHeight + b);
    }
    popup.HorizontalOffset = offsetX;
    popup.VerticalOffset = offsetY;

    return popup;
}

差不多主要的就是这些了.到这.画图有点累.

源码下载:ArcChart.zip

到此这篇关于基于WPF实现带明细的环形图表 的文章就介绍到这了,更多相关WPF环形图表内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • WPF图表LiveChart使用详解

    本文主要介绍LiveChart.WPF 中的图表的使用方法 类: 数据绑定, 数据显示样式等. 导入LiveChart.Wpf NuGet搜索LiveChart包, 安装LiveChart.Wpf即可. 引用LiveChart.Wpf 在使用的界面当中引用LiveChart.Wpf的类库 xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf" 以直方图.折线图为例, 都属于 CartesianChart 下的一种

  • WPF仿LiveCharts实现饼图的绘制

    目录 前言 一.PieControl.cs 二.App.xaml 三.MainWindow.xaml 四.MainWindow.xaml.cs 每日一笑 下班和实习生一起回家,公交站等车,一乞丐把碗推向实习生乞讨.这时,实习生不慌不忙的说了句:“我不要你的钱,你这钱来的也不容易.” 前言 有小伙伴需要统计图. 效果预览(更多效果请下载源码体验) 一.PieControl.cs using System.Collections.ObjectModel; using System.Windows;

  • C# 使用WPF 用MediaElement控件实现视频循环播放

    在WPF里用MediaElement控件,实现一个循环播放单一视频的程序,同时可以控制视频的播放.暂停.停止. 一种方式,使用MediaElement.MediaEnded事件,在视频播放结束后,自动重新播放: 另一种方式,使用WPF定时器,在定时器事件里写入视频播放代码. 后者优点是可以控制循环时长,不必等到视频播放结束就可以开始下一次播放,比如:同时启动多个播放程序,使多个时长不同的视频同时播放,无限循环,如果采用第一种方式,累计多次自动播放后,视频内容就无法同步. 第一种方式: XAML:

  • WPF实现环(圆)形菜单的示例代码

    目录 前言 实现代码 1.CircularMenuItemCustomControl.cs 2.CircularMenuItemCustomControlStyle.xaml 3.MainWindow.xaml 4.MainWindow.xaml.cs 前言 需要实现环(圆)形菜单. 效果预览(更多效果请下载源码体验): 实现代码 1.CircularMenuItemCustomControl.cs using System; using System.Collections.Generic;

  • WPF使用WrapPanel环绕面板布局

    WrapPanel:环绕面板 WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够时就会自动调整进行换行,后续排序按照从上至下或从右至左的顺序进行. Orientation——根据内容自动换行.当Orientation属性的值设置为 Horizontal:元素是从左向右排列的,然后自上至下自动换行.当Orientation属性的值设置为Vertical:元素是从上向下排列的,然后从左至右自动换行. ItemHeight——所有子元素都一致的高度.每个子元素填充高度的

  • 基于WPF实现带明细的环形图表

    目录 效果 大体思路 圆弧部分 Popup明细部分 椭圆 折线 Popup的定位 效果 明细用Popup实现的,录gif时,Popup显示不出来,不知道为什么,所以静态图凑合看吧 大体思路 图表使用Arc+Popup实现 图表分为两部分,一是环形部分,一是标注的明细部分. 环形部分使用Arc图形表示.需要注意这个Arc是Blend里的图形.用Blend建项目的话可以直接用,使用VS建项目需要添加引用 Microsoft.Expression.Drawing 在引用管理器=>程序集=>扩展 下(

  • WPF制作带小箭头的按钮完整代码

    什么是WPF WPF(Windows Presentation Foundation)是微软推出的基于Windows 的用户界面框架,属于.NET Framework 3.0的一部分.它提供了统一的编程模型.语言和框架,真正做到了分离界面设计人员与开发人员的工作:同时它提供了全新的多媒体交互用户图形界面. 在没给大家介绍实现代码之前,先给大家看下效果图,如果大家感觉效果不错,请参考实现代码: XAML代码: <ControlTemplate x:Key="btnTpl" Targ

  • 基于IOS实现带箭头的view

    我使用DrawRect进行的View的拉伸(是这样描述的吧??), 效果图也实现了类似于微信的View效果, 你可以看一看. 创建继承于UIView的视图 .h文件 // backGoundView @property (nonatomic, strong) UIView * _Nonnull backGoundView; // titles @property (nonatomic, strong) NSArray * _Nonnull dataArray; // images @proper

  • 基于JavaScript实现带数据验证和复选框的表单提交

    实现: 1.用户至少选中某项,即表示选中该行,同时该行的数据验证通过,表单提交:否则,不提交. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>带数据验证和复选框的表单提交</title> <script src="../commonJqery/jquery-3.0.0.js&q

  • PHP基于phpqrcode生成带LOGO图像的二维码实例

    本文实例讲述了PHP基于phpqrcode生成带LOGO图像的二维码.分享给大家供大家参考.具体如下: 这里PHP使用phpqrcode生成带LOGO图像的二维码,使用起来很方便,代码中含 生成不带Logo的标准二维码和生成带Logo的二维码,可根据注释修改使用. <?php include ('phpqrcode.php'); $value = 'http://www.codesc.net';//二维码数据 $errorCorrectionLevel = 'L';//纠错级别:L.M.Q.H

  • jQuery基于ajax实现带动画效果无刷新柱状图投票代码

    本文实例讲述了jQuery基于ajax实现带动画效果无刷新柱状图投票代码.分享给大家供大家参考.具体如下: 这里介绍的jQuery ajax投票特效,带动画效果 类似进度条风格的柱状图,以你最喜欢的编程语言是哪一种为例来演示投票效果,以Ajax方式无刷新投票,每点击一次,横向的柱状图就会增长一节.如果在火狐或chrome下浏览,那些柱状图横条是圆角的,在IE8下则无此效果. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head>

  • 基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)

    这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,比如旋转飞入.上下抖动飞入等.效果图如下: 效果演示    源码下载 html代码: <div class="container"> <h1>jQuery gDialog Plugin Exampels</h1> <button class="btn demo-1">Alert Dialog Box<

  • 基于JS实现带动画效果的流程进度条

    当在使用流程的时候,比如有一个审核流程,有三个阶段:开始,审核中,审核成功.当在不同的阶段,做相应的进度显示,当显示时,是以动画的形式显示的.话不多说,我们开始打造吧. 首先,我考虑的是使用canvas来打造这个控件,于是我现在demo.html里新建了一个canvas用来显示测试用,并且先预计了几个属性值,在做的过程中增增改改,最终属性如下: <canvas id="myCanvas" width="800" height="100" s

  • c# 基于wpf,开发OFD电子文档阅读器

    前言 OFD是国家标准版式文档格式,于2016年生效.OFD文档国家标准参见<电子文件存储与交换格式版式文档>.既然是国家标准,OFD随后肯定会首先在政务系统使用,并逐步推向社会各个方面.OFD是在研究当下各类文件格式后,推出的标准,有如下优点: 1 产权属于自主产权 2 具有便携性:文件小,可压缩比率大.测试显示生成的文件体量比PDF还要小. 3 具有开放性:易于入门,对于使用者来说更具开放性. 4 具有扩展性:预留了可扩展入口和自定义标引,设置了非接触式引用机制,为特性化提供支持. 5 呈

  • 基于WPF实现用户头像选择器的示例代码

    目录 实现思路 核心代码 参考资料 实现思路 制作一个用户头像选择器仿 WeGame 制作一个用户头像选择Canvas为父控件所实现,展示图片使用Image,Path当作上方的蒙版; Canvas:主要用途方便移动Image,设置ClipToBounds="True"裁剪为一个正方形200x200做为主要展示区域; Image:展示需要裁剪的图片: Path:CombinedGeometry[1]绘制蒙版大小200x200效果如下: 当选择一个本地图片的时候判断宽与高谁更大,谁小就将它

随机推荐