WPF原生环形图表

原文: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;
        }