WPF實現統計圖（餅圖仿LiveCharts）

WPF開發者QQ群： 340500857 | 微信群 -> 進入公眾號主頁加入組織

每日一笑

　　　　下班和實習生一起回家，公交站等車，一乞丐把碗推向實習生乞討。這時，實習生不慌不忙的說了句：“我不要你的錢，你這錢來的也不容易。”

前言

有小夥伴需要統計圖。

歡迎轉發、分享、點贊，謝謝大家~。

效果預覽（更多效果請下載原始碼體驗）

一、PieControl.cs 程式碼如下

using System.Collections.ObjectModel;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

using WpfPieControl.Models;

namespace WpfPieControl

{

    public class PieControl: Control

    {

        public ObservableCollection<PieSegmentModel> PieSegmentModels

        {

            get { return (ObservableCollection<PieSegmentModel>)GetValue(PieSegmentModelsProperty); }

            set { SetValue(PieSegmentModelsProperty, value); }

        }

        public static readonly DependencyProperty PieSegmentModelsProperty =

            DependencyProperty.Register("PieSegmentModels", typeof(ObservableCollection<PieSegmentModel>), typeof(PieControl), new UIPropertyMetadata(OnPieSegmentModelChanged));

        private static void OnPieSegmentModelChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)

        {

            PieControl pieControl = d as PieControl;

            if (e.NewValue != null)

            {

                var array = e.NewValue as ObservableCollection<PieSegmentModel>;

                double angleNum = 0;

                foreach (var item in array)

                {

                    var color = new SolidColorBrush((Color)ColorConverter.ConvertFromString(pieControl.ColorArray[array.IndexOf(item)]));

                    item.Color = color;

                    item.StartAngle = angleNum;

                    item.EndAngle = angleNum + item.Value / 100 * 360;

                    angleNum = item.EndAngle;

                }

            }

        }

        /// <summary>

        /// colors

        /// </summary>

        private string[] ColorArray = new string[] { "#FDC006", "#607E89", "#2095F2", "#F34336" };

        /// <summary>

        /// 0~1

        /// </summary>

        public double ArcThickness

        {

            get { return (double)GetValue(ArcThicknessProperty); }

            set { SetValue(ArcThicknessProperty, value); }

        }

        public static readonly DependencyProperty ArcThicknessProperty =

            DependencyProperty.Register("ArcThickness", typeof(double), typeof(PieControl), new PropertyMetadata(1.0));

        static PieControl()

        {

            DefaultStyleKeyProperty.OverrideMetadata(typeof(PieControl), new FrameworkPropertyMetadata(typeof(PieControl)));

        }

    }

}

二、App.xaml 程式碼如下

<Style TargetType="{x:Type local:PieControl}">

            <Setter Property="UseLayoutRounding" Value="True" />

            <!--<Setter Property="Background" Value="#252525"/>-->

            <Setter Property="Foreground" Value="White"/>

            <Setter Property="Width" Value="250"/>

            <Setter Property="Height" Value="250"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type local:PieControl}">

                        <ItemsControl Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"

                                      ItemsSource="{TemplateBinding PieSegmentModels}"

                                      Background="{TemplateBinding Background}">

                            <ItemsControl.ItemsPanel>

                                <ItemsPanelTemplate>

                                    <Grid IsItemsHost="True"/>

                                </ItemsPanelTemplate>

                            </ItemsControl.ItemsPanel>

                            <ItemsControl.ItemTemplate>

                                <DataTemplate>

                                    <ed:Arc Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"

                                                ArcThickness="{Binding ArcThickness,RelativeSource={RelativeSource FindAncestor,AncestorType=local:PieControl}}" ArcThicknessUnit="Percent"

                                                EndAngle="{Binding EndAngle}"

                                                StartAngle="{Binding StartAngle}"

                                                Stretch="None"

                                                ToolTip="{Binding Name}"

                                                Stroke="{Binding ColorStroke}"

                                                StrokeThickness="2"

                                                Fill="{Binding Color}">

                                    </ed:Arc>

                                </DataTemplate>

                            </ItemsControl.ItemTemplate>

                        </ItemsControl>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

</Style>

三、MainWindow.xaml 程式碼如下

<Window x:Class="WpfPieControl.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:WpfPieControl"

        mc:Ignorable="d"

        Title="微信公眾號：WPF開發者" Height="450" Width="800">

    <StackPanel>

        <WrapPanel Margin="10">

            <local:PieControl PieSegmentModels="{Binding PieSegmentModels,RelativeSource={RelativeSource AncestorType=local:MainWindow}}" ArcThickness="1"/>

            <local:PieControl PieSegmentModels="{Binding PieSegmentModels,RelativeSource={RelativeSource AncestorType=local:MainWindow}}"

                                  Margin="4,0"

                                  ArcThickness="{Binding ElementName=PRAT_Slider,Path=Value}"/>

            <local:PieControl PieSegmentModels="{Binding PieSegmentModels,RelativeSource={RelativeSource AncestorType=local:MainWindow}}" ArcThickness="0.65"/>

        </WrapPanel>

        <Slider Maximum="0.9" Minimum="0.1" x:Name="PRAT_Slider" Margin="10" Width="200"/>

        <Button Content="更新" Click="Button_Click" VerticalAlignment="Bottom" Width="200"/>

    </StackPanel>

</Window>

四、MainWindow.xaml.cs 程式碼如下

using System;

using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

using WpfPieControl.Models;

namespace WpfPieControl

{

    /// <summary>

    /// MainWindow.xaml 的互動邏輯

    /// </summary>

    public partial class MainWindow : Window

    {

        public ObservableCollection<PieSegmentModel> PieSegmentModels

        {

            get { return (ObservableCollection<PieSegmentModel>)GetValue(PieSegmentModelsProperty); }

            set { SetValue(PieSegmentModelsProperty, value); }

        }

        public static readonly DependencyProperty PieSegmentModelsProperty =

            DependencyProperty.Register("PieSegmentModels", typeof(ObservableCollection<PieSegmentModel>), typeof(MainWindow), new PropertyMetadata(null));

        List<ObservableCollection<PieSegmentModel>> collectionList = new List<ObservableCollection<PieSegmentModel>>();

        public MainWindow()

        {

            InitializeComponent();

            PieSegmentModels = new ObservableCollection<PieSegmentModel>();

            var collection1 = new ObservableCollection<PieSegmentModel>();

            collection1.Add(new PieSegmentModel { Name = "一", Value = 10 });

            collection1.Add(new PieSegmentModel { Name = "二", Value = 20 });

            collection1.Add(new PieSegmentModel { Name = "三", Value = 25 });

            collection1.Add(new PieSegmentModel { Name = "四", Value = 45 });

            var collection2 = new ObservableCollection<PieSegmentModel>();

            collection2.Add(new PieSegmentModel { Name = "一", Value = 30 });

            collection2.Add(new PieSegmentModel { Name = "二", Value = 15 });

            collection2.Add(new PieSegmentModel { Name = "三", Value = 10 });

            collection2.Add(new PieSegmentModel { Name = "四", Value = 55 });

            collectionList.AddRange(new[] { collection1, collection2 });

            PieSegmentModels = collectionList[0];

        }

        bool isRefresh = false;

        private void Button_Click(object sender, RoutedEventArgs e)

        {

            if (!isRefresh)

                PieSegmentModels = collectionList[1];

            else

                PieSegmentModels = collectionList[0];

            isRefresh = !isRefresh;

        }

    }

}

更多教程歡迎關注微信公眾號：

WPF開發者QQ群： 340500857

blogs： https://www.cnblogs.com/yanjinhua/p/14345136.html

原始碼Github：https://github.com/yanjinhuagood/WPFDevelopers.git

gitee：https://gitee.com/yanjinhua/WPFDevelopers.git

WPF實現統計圖（餅圖仿LiveCharts）

WPF實現統計圖（餅圖仿LiveCharts）

最新文章