WPF 自定义雷达图开发实例教程

2019-12-30 13:54:41刘景俊

后台:


/// <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;
 }
 }

4、界面引用控件


<Window x:Class="WpfApplication2.MainWindow"
  xmlns="http://www.easck.com/winfx/2006/xaml/presentation"
  xmlns:x="http://www.easck.com/winfx/2006/xaml"
  xmlns:wpfApplication2="clr-namespace:WpfApplication2"
 <Grid>
  <wpfApplication2:RadarChartControl x:Name="RadarChartControl" HorizontalAlignment="Center" VerticalAlignment="Center">
   <wpfApplication2:RadarChartControl.Arguments>
    <wpfApplication2:ArgumentModel Name="C#" IconSource="Chart_Bar_Big.png"></wpfApplication2:ArgumentModel>
    <wpfApplication2:ArgumentModel Name="JAVA" IconSource="Blueprint_Blog.png"></wpfApplication2:ArgumentModel>
    <wpfApplication2:ArgumentModel Name="Python" IconSource="Chart_Graph_Descending.png"></wpfApplication2:ArgumentModel>
    <wpfApplication2:ArgumentModel Name="VB" IconSource="Chart_Bar_Big.png"></wpfApplication2:ArgumentModel>
    <wpfApplication2:ArgumentModel Name="其它" IconSource="Chart_Graph_Descending.png"></wpfApplication2:ArgumentModel>
   </wpfApplication2:RadarChartControl.Arguments>
   <wpfApplication2:RadarChartControl.Datas>
    <wpfApplication2:ChartItem Name="应聘者A" Color="#FF07C507">
     <wpfApplication2:ChartItem.DataList>
      <wpfApplication2:ChartData Data="1"></wpfApplication2:ChartData>
      <wpfApplication2:ChartData Data="3"></wpfApplication2:ChartData>
      <wpfApplication2:ChartData Data="3"></wpfApplication2:ChartData>
      <wpfApplication2:ChartData Data="4"></wpfApplication2:ChartData>
      <wpfApplication2:ChartData Data="4"></wpfApplication2:ChartData>
     </wpfApplication2:ChartItem.DataList>
    </wpfApplication2:ChartItem>
    <wpfApplication2:ChartItem Name="应聘者B" Color="#FF508BF3">
     <wpfApplication2:ChartItem.DataList>
      <wpfApplication2:ChartData Data="4"></wpfApplication2:ChartData>
      <wpfApplication2:ChartData Data="1"></wpfApplication2:ChartData>
      <wpfApplication2:ChartData Data="2"></wpfApplication2:ChartData>
      <wpfApplication2:ChartData Data="1"></wpfApplication2:ChartData>
      <wpfApplication2:ChartData Data="1"></wpfApplication2:ChartData>
     </wpfApplication2:ChartItem.DataList>
    </wpfApplication2:ChartItem>
    <wpfApplication2:ChartItem Name="应聘者C" Color="#FFF73131">
     <wpfApplication2:ChartItem.DataList>
      <wpfApplication2:ChartData Data="2"></wpfApplication2:ChartData>
      <wpfApplication2:ChartData Data="2"></wpfApplication2:ChartData>
      <wpfApplication2:ChartData Data="3"></wpfApplication2:ChartData>
      <wpfApplication2:ChartData Data="3"></wpfApplication2:ChartData>
      <wpfApplication2:ChartData Data="3"></wpfApplication2:ChartData>
     </wpfApplication2:ChartItem.DataList>
    </wpfApplication2:ChartItem>
   </wpfApplication2:RadarChartControl.Datas>
  </wpfApplication2:RadarChartControl>
 </Grid>
</Window>