前言
有小伙伴提出需要实现雷达图。
由于在WPF中没有现成的雷达图控件,所以我们自己实现一个。
PS:有更好的方式欢迎推荐。
代码如下
一、创建 RadarChart.cs 菜单继承 Control代码如下。
RadarChart.cs实现思路如下
1、RadarArray :存放展示集合 。
2、重写OnRender 。
3、根据三角函数和圆的半径计算出圆上的N个点绘制成多边形
GetPolygonPoint()。
4、在绘制多边形的时候因为需要多个大小不一的多边形,则需要
多次调用GetPolygonPoint()方法,最外层绘制150,中间层100
中心点层 50。
5、DrawPoints() 方法增加了一个bool参数isDrawText是否绘制Text文
本,因为最外侧需要绘制文本。
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
namespace WPFDevelopers.Controls
{
public class RadarChart:Control
{
public ObservableCollection<RadarModel> RadarArray
{
get { return (ObservableCollection<RadarModel>)GetValue(RadarArrayProperty); }
set { SetValue(RadarArrayProperty, value); }
}
public static readonly DependencyProperty RadarArrayProperty =
DependencyProperty.Register("RadarArray", typeof(ObservableCollection<RadarModel>), typeof(RadarChart), new PropertyMetadata(null));
static RadarChart()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(RadarChart), new FrameworkPropertyMetadata(typeof(RadarChart)));
}
protected override void OnRender(DrawingContext drawingContext)
{
DrawPoints(150, drawingContext,true);
DrawPoints(100, drawingContext);
DrawPoints(50, drawingContext);
var myPen = new Pen
{
Thickness = 4,
Brush = Brushes.DodgerBlue
};
myPen.Freeze();
StreamGeometry streamGeometry = new StreamGeometry();
using (StreamGeometryContext geometryContext = streamGeometry.Open())
{
var h = this.ActualHeight / 2;
var w = this.Actual