WPF 自定义雷达图

3、最后定义数据标题显示列表

前台:

<UserControl x:Class="WpfApplication4.RadarChartTitleList"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300" Loaded="RadarChartTitleList_OnLoaded">
<UserControl.Resources>
<Style x:Key="ItemContainer" TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="IconBorder" Background="Transparent" CornerRadius="4" BorderThickness="0">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="IconBorder" Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="Transparent" GlowSize="5" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid>
<ListBox x:Name="MyListBox" ItemsSource="{Binding}" ItemContainerStyle="{StaticResource ItemContainer}" FocusVisualStyle="{x:Null}">
<ListBox.Template>
<ControlTemplate>
<StackPanel Background="Transparent" IsItemsHost="True"></StackPanel>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" VerticalAlignment="Center" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid HorizontalAlignment="Center" Margin="10,0" Background="Transparent">
<Ellipse Fill="{Binding Color}" Height="6" Width="6" HorizontalAlignment="Right" VerticalAlignment="Center"></Ellipse>
<Canvas VerticalAlignment="Center" HorizontalAlignment="Center">
<Path Fill="{Binding Color}" Height="5" StrokeThickness="1" Stroke="{Binding Color}" VerticalAlignment="Center" Data="M-10,0 L10,0"></Path>
</Canvas>
</Grid>
<TextBlock Grid.Column="1" Text="{Binding Name}" Foreground="White" Background="Transparent"></TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>

后台:

/// <summary>
/// RadarChartTitleList.xaml 的交互逻辑
/// </summary>
public partial class RadarChartTitleList : UserControl
{
public RadarChartTitleList()
{
InitializeComponent();
}
/// <summary>
/// 数据
/// </summary>
public List<ChartItem> ItemSoure
{
get { return (List<ChartItem>)GetValue(ItemSoureProperty); }
set { SetValue(ItemSoureProperty, value); }
}

public static readonly DependencyProperty ItemSoureProperty = DependencyProperty.Register("ItemSoure", typeof(List<ChartItem>),
typeof(RadarChartControl), new PropertyMetadata(new List<ChartItem>()));

private void RadarChartTitleList_OnLoaded(object sender, RoutedEventArgs e)
{
this.DataContext = ItemSoure;
}
}

时间: 2024-08-02 07:01:21

WPF 自定义雷达图的相关文章

WPF 自定义雷达图(二)

2.然后自定义一下标题按钮,命名为“ChartButton” 前台: <UserControl x:Class="WpfApplication4.ChartButton" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="

WPF 自定义雷达图(四)

4.最后,引用即可,案例如下: <wpfApplication4:RadarChartControl x:Name="RadarChartControl" HorizontalAlignment="Center" VerticalAlignment="Center" TitleClick="RadarChartControl_OnTitleClick"> <wpfApplication4:RadarChart

在Unity中使用uGUI绘制自定义图形(饼状图 雷达图)

饼状图或者是雷达图是根据属性自动生成的自定义图形.这里展示了如何使用uGUI完成这一功能. 先附上我制作雷达图的控件的代码  UIPropWidget.cs using UnityEngine; using System.Collections.Generic; using UnityEngine.UI; /* * * 2 6 * * 3 7 * * 0 1 5 4 * * * 2 6位为属性0 3为属性1 0为属性2 4为属性3 7为属性4 */ public class UIPropWidg

WPF DevExpress 设置雷达图Radar样式

  DevExpress中定义的ChartControl很不错,很多项目直接使用这种控件. 本节讲述雷达图的样式设置 <Grid> <Grid.Resources> <DataTemplate x:Key="LabelItemDataTemplate" DataType="dxc:SeriesLabelItem"> <Border CornerRadius="8" Padding="8,1&qu

WPF 雷达图

雷达图逻辑同玫瑰图差不多,不同的地方在于绘制雷达网络,也就是蜘蛛网这样的底图. 界面代码 <UserControl x:Class="Painter.RadarControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc=&qu

WPF自定义路由事件

一 概要 本文通过实例演示WPF自定义路由事件的使用,进而探讨了路由事件与普通的CLR事件的区别(注:"普通的CLR事件"这个说法可能不太专业,但是,我暂时也找不到什么更好的称呼,就这么着吧,呵呵.)(扩展阅读:例说.NET事件的使用). 二 实例演示与说明 1 新建DetailReportEventArgs类,该类派生自RoutedEventArgs类,RoutedEventArgs类包含与路由事件相关的状态信息和事件数据.DetailReportEventArgs类中定义了属性Ev

javascript雷达图/星形图/极坐标图Radar &amp; Polar chart介绍

Radar & Polar chart 控件为软件开发人员提供了雷达图/星形图/极坐标图,它以轴上的同一个点为起点,绘制出三个或更多的变量. 具体功能: 任意多的轴 动态或静态 简单.堆积.100%堆积的图表 网格线能转换为圆环 在轴之间进行填充 以自定义范围值填充 跨平台 导出为图像 可通过JavaScript进行控制 可直接通过HTML文件进行设置和数据交换 自定义图像和Flash(动态)背景 无限的标签 可旋转的标签 可使用预设频率重新加载数据 格式任何气球文本 Amcharts可以从简单

Android自定义控件 芝麻信用分雷达图

本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发. 1.介绍 首先看下支付宝上芝麻信用分的效果图: 2.思路 确定雷达图中心点坐标 绘制多边形及连接线 根据维度值绘制覆盖区域 绘制分数 绘制每个维度的标题文字和图标 3.实现 获取布局的中心坐标 在onSizeChanged(int w, int h, int oldw, int oldh)方法里面,根据View的长宽,计算出雷达图的半径(这里取布局宽高最小值的四分之一,可以自定义),获取整个布局的中心坐标.

手动撸个Android雷达图(蜘蛛网图)RadarView

公司产品需要一个雷达图来展示各维度的比重,网上找了一波,学到不少,直接自己上手来撸一记 无图言虚空 简单分析一波,确定雷达图正几边形的--正五边形 int count=5,分为几个层数--4 层 int layerCount=4     @Override     protected void onDraw(Canvas canvas) {         super.onDraw(canvas);         drawPolygon(canvas);//画边         drawLin