WPF原生环形图表

版权声明：欢迎转载。转载请注明出处，谢谢 https://blog.csdn.net/wzcool273509239/article/details/56480963

主要利用Canvas的子控件（两个圆环）的相对定位进行实现，目前高度和宽度是写死的，有需要的人可重写成自定义宽度和高度。

需要引用Microsoft.SDK.Expression.Blend，可通过NuGet获得

1. 界面UCCircleChart.xaml

<UserControl x:Class="HushuPlatform.CommUserControl.HomeLeft.UCCircleChart"

             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"

             xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"

             mc:Ignorable="d" Width="250" Height="260">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="210"></RowDefinition>

            <RowDefinition></RowDefinition>

        </Grid.RowDefinitions>

        <Canvas Name="cavans" Height="210"  Width="210">

            <!--空白 作为背景。。Stroke边线颜色；Fill填充颜色-->

            <ed:Arc Canvas.Left="5" Canvas.Top="5" ArcThickness="50" ArcThicknessUnit="Pixel"

                    HorizontalAlignment="Left" Stretch="None" Stroke="White"  Fill="Transparent"

                    StartAngle="0" EndAngle="360"

                    VerticalAlignment="Top" Height="200"  Width="200"/>

            <!--填充值 作为白分比，即更改EndAngle值即可。需要数值*3.6。因360度等分100份，每次3.6。Stroke边线颜色；Fill填充颜色-->

            <ed:Arc x:Name="charValue" Canvas.Left="5" Canvas.Top="5" ArcThickness="50" ArcThicknessUnit="Pixel"

                    HorizontalAlignment="Left" Stretch="None" Stroke="White" Fill="White"

                    StartAngle="0" EndAngle="60"

                    VerticalAlignment="Top" Height="200"  Width="200"/>

            <!--中间显示的百分比-->

            <TextBlock Name="txtChartValue" Canvas.Left="69" Canvas.Top="84" Text="50%" FontSize="36" Foreground="White" ></TextBlock>

        </Canvas>

        <TextBlock  Name="txtAreaName" Grid.Row="1" Text="12321" Foreground="White" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Bottom"></TextBlock>

    </Grid>

</UserControl>

2. 后台UCCircleChart.xaml.cs

using System;

using System.Collections.Generic;

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;

namespace HushuPlatform.CommUserControl.HomeLeft

{

    /// <summary>

    /// 圆环形 Chart

    /// </summary>

    public partial class UCCircleChart : UserControl

    {

        /// <summary>

        /// 百分比 （参数：percent=10,20,30,50.25 等。如是10%，则传10，依次类推）

        /// </summary>

        /// <param name="percent"></param>

        public UCCircleChart(string percent)

        {

            InitializeComponent();

            if (string.IsNullOrEmpty(percent))

            {

                percent = "0";

            }

            double EndAngle = Convert.ToDouble(percent) * 3.6;//360度等分100份，每次3.6

            this.charValue.EndAngle = EndAngle;

            this.txtChartValue.Text = percent + "%";

            txtAreaName.Visibility = Visibility.Collapsed;

        }

        /// <summary>

        /// 百分比、名字 （参数：percent=10,20,30,50.25 等。如是10%，则传10，依次类推）

        /// </summary>

        /// <param name="percent">百分比</param>

        /// <param name="areaName"></param>

        public UCCircleChart(string percent, string areaName)

        {

            InitializeComponent();

            if (string.IsNullOrEmpty(percent))

            {

                percent = "0";

            }

            double EndAngle = Convert.ToDouble(percent) * 3.6;//360度等分100份，每次3.6

            this.charValue.EndAngle = EndAngle;

            this.txtChartValue.Text = percent + "%";

            txtAreaName.Text = areaName;

        }

    }

}

3.调用

//各区域面积

private double m_Area = 7000;

private double m_Area2 = 1000;

private double m_Area3 = 1000;

private double m_Area4 = 5500;

double total = m_Area + m_Area2 + m_Area3 + m_Area4;

string tmp1 = (m_Area / total * 100).ToString("f0");

wpChart.Children.Add(new HushuPlatform.CommUserControl.HomeLeft.UCCircleChart(tmp1, "优质稻米片区"));

4. 补充

前端定义样式用于控制Canvas.Let 和Top

<UserControl.Resources>

<Style TargetType="{x:Type ed:Arc}">

<Setter Property="Canvas.Left" Value="5" />

<Setter Property="Canvas.Top" Value="5" />

</Style>

</UserControl.Resources>

后端循环创建arc

   public UCCircleChart(List<SeriesCharModel> list)

        {

            InitializeComponent();

            this.charValue.Visibility = Visibility.Collapsed;

            if (list != null && list.Count > 0)

            {

                double startAngngle = 0;

                for (int i = 0; i < list.Count; i++)

                {

                    Microsoft.Expression.Shapes.Arc arc = new Microsoft.Expression.Shapes.Arc();

                    arc.ArcThickness = 50;

                    arc.ArcThicknessUnit = Microsoft.Expression.Media.UnitType.Pixel;

                    arc.VerticalAlignment = VerticalAlignment.Top;

                    arc.HorizontalAlignment = HorizontalAlignment.Left;

                    System.Drawing.Color color = GetColor(list[i].CharColor);

                    arc.Stroke = new SolidColorBrush(System.Windows.Media.Colors.White);

                    arc.Stretch = Stretch.None;

                    arc.Fill = new SolidColorBrush(System.Windows.Media.Color.FromArgb(color.A, color.R, color.G, color.B));

                    arc.Height = 200;

                    arc.Width = 200;

                    arc.StartAngle = startAngngle;

                    arc.EndAngle = arc.StartAngle + list[i].ChartValue;

                    this.cavans.Children.Add(arc);

                    startAngngle += arc.EndAngle;//下一个的紧挨着上一个

                }

            }

        }

        /// <summary>

        /// Get color, param like "#000000" or "#00f" or "255,255,255"

        /// </summary>

        /// <param name="fontColorARGB"></param>

        /// <returns></returns>

        private System.Drawing.Color GetColor(string fontColorARGB)

        {

            System.Drawing.ColorConverter convert = new System.Drawing.ColorConverter();

            var tmpColor = System.Drawing.ColorTranslator.FromHtml(fontColorARGB);

            return tmpColor;

        }