如何实现一个条形图

本篇文章为大家展示了如何实现一个条形图，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

站在用户的角度思考问题，与客户深入沟通，找到和县网站设计与和县网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都做网站、网站制作、企业官网、英文网站、手机端网站、网站推广、域名注册、网络空间、企业邮箱。业务覆盖和县地区。

一、先看效果

二、本文背景

有没有这种场景：开源控件库或者收费的控件库，条形图或者柱状图都非常强大，但我的业务就是不符合，就是要自己设计呢？本文通过简单的实现一个条形图功能，以后类似的统计图可以在这上面进行修改，原理是类似的。

三、代码实现

小编使用.Net Core 3.1创建的WPF工程，创建名称为“BarChart”的解决方案后，添加名称为”Bar“的WPF用户控件，这个控件就是上图中的单个柱子，下面是Bar.xaml代码

            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"
            MinHeight="20" Width="Auto" Loaded="UserControl_Loaded">
   
       
       
       
           
               
           
       
   

Bar.xaml.cs代码，主要是绑定前景色及背景色，及柱子百分比值。

using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace BarChart
{
   /// 

   /// BarChart.xaml 的交互逻辑
   /// 

   public partial class Bar  : UserControl, INotifyPropertyChanged
   {
       public event PropertyChangedEventHandler PropertyChanged;
       private void NotifyPropertyChanged(string info)
       {
           if (PropertyChanged != null)
           {
               PropertyChanged(this, new PropertyChangedEventArgs(info));
           }
       }

       private double _value;
       public double Value
       {
           get { return _value; }
           set
           {
               _value = value;
               UpdateBarHeight();
               NotifyPropertyChanged("Value");
           }
       }

       private double maxValue;
       public double MaxValue
       {
           get { return maxValue; }
           set
           {
               maxValue = value;
               UpdateBarHeight();
               NotifyPropertyChanged("MaxValue");
           }
       }

       private double barHeight;
       public double BarHeight
       {
           get { return barHeight; }
           set
           {
               barHeight = value;
               NotifyPropertyChanged("BarHeight");
           }
       }

       private Brush color;
       public Brush Color
       {
           get { return color; }
           set
           {
               color = value;
               NotifyPropertyChanged("Color");
           }
       }

       private void UpdateBarHeight()
       {
           if (maxValue > 0)
           {
               var percent = (_value * 100) / maxValue;
               BarHeight = (percent * this.ActualHeight) / 100;
           }
       }

       public Bar()
       {
           InitializeComponent();

           this.DataContext = this;
           color = Brushes.Black;
       }


       private void UserControl_Loaded(object sender, RoutedEventArgs e)
       {
           UpdateBarHeight();
       }

       private void Grid_SizeChanged(object sender, SizeChangedEventArgs e)
       {
           UpdateBarHeight();
       }
   }
}

主窗体MainWindow.xaml，添加显示的业务数据，目前只是展示了进度值，其他标签只要你看懂了代码，很好加的，比如每根柱子，上面颜色显示一种意义名称、下面显示另一种意义名称。

       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:BarChart"
       mc:Ignorable="d"
       Background="#FF252525" FontFamily="Nontserrrat"
       Title="MainWindow" Height="600" Width="1080" WindowStyle="None" ResizeMode="NoResize" WindowStartupLocation="CenterScreen">
   
       
           
           
       

       
                                 Foreground="White" FontSize="24"/>
       

                      HorizontalAlignment="Left" Margin="20" Background="White"
               BorderBrush="Gray" CornerRadius="12">
           
               
               
                   
                   
                   
                   
                   
                   
               
           
       
   

上述内容就是如何实现一个条形图，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。