WPF實現統計圖

驚鏵發表於2021-11-02

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

前言

有小夥伴提出需要實現統計圖。

由於在WPF中沒有現成的統計圖控制元件，所以我們自己實現一個。

PS：有更好的方式歡迎推薦。

程式碼如下

一、建立 BasicBarChart.cs 繼承 Control程式碼如下。

BasicBarChart.cs實現思路如下

1、SeriesArray ：存放展示集合。

2、重寫OnRender 。

3、先繪製X軸線。

4、呼叫GetFormattedText()繪製底部類別。

5、呼叫GetFormattedText()繪製左側標尺。

6、DrawingContext繪製Line的時候會發虛，以下方法可以避免

var d = Pen.Thickness / 2;

var guidelines = new GuidelineSet(new[] { d }, new[] { d });

drawingContext.PushGuidelineSet(guidelines);

或者呼叫

SnapDrawingExtensions.DrawSnappedLinesBetweenPoints（）

避免畫線發虛。

WPF實現統計圖

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace WPFDevelopers.Controls
{
    public class BasicBarChart : Control
    {
        public IEnumerable<KeyValuePair<string, double>> SeriesArray
        {
            get { return (IEnumerable<KeyValuePair<string, double>>)GetValue(SeriesArrayProperty); }
            set { SetValue(SeriesArrayProperty, value); }
        }

        public static readonly DependencyProperty SeriesArrayProperty =
            DependencyProperty.Register("SeriesArray", typeof(IEnumerable<KeyValuePair<string, double>>), typeof(BasicBarChart), new UIPropertyMetadata(SeriesArrayChanged));
        private static void SeriesArrayChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            BasicBarChart radarChart = d as BasicBarChart;
            if (e.NewValue != null)
                radarChart.InvalidateVisual();
        }


        static BasicBarChart()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(BasicBarChart), new FrameworkPropertyMetadata(typeof(BasicBarChart)));
        }
        protected override void OnRender(DrawingContext drawingContext)
        {
            //base.OnRender(drawingContext);
            if (SeriesArray == null || SeriesArray.Count() == 0)
                return;
            SnapsToDevicePixels = true;
            UseLayoutRounding = true;
            var brushConverter = new BrushConverter();
            var myPen = new Pen
            {
                Thickness = 1,
                Brush = (Brush)brushConverter.ConvertFromString("#6E7079")
            };
            myPen.Freeze();

            //var d = myPen.Thickness / 2;
            //var guidelines = new GuidelineSet(new[] { d }, new[] { d });
            //drawingContext.PushGuidelineSet(guidelines);

            var h = this.ActualHeight / 2 + 160;
            var w = this.ActualWidth / 2;
            var startX = w / 3;
            var width = SeriesArray.Count() * 120 + startX;
            //drawingContext.DrawLine(myPen, new Point(startX, h), new Point(width, h));
            var stratNum = 0;

            SnapDrawingExtensions.DrawSnappedLinesBetweenPoints(drawingContext,myPen,myPen.Thickness, new Point(startX, h), new Point(width, h));
            var formattedText = GetFormattedText(stratNum.ToString());
            drawingContext.DrawText(formattedText, new Point(startX - formattedText.Width * 2 - 10, h - formattedText.Height / 2));
            var x = startX;
            //var y = h + d;
            var y = h + myPen.Thickness;
            var points = new List<Point>();
            var rectBrush = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#5470C6"));
            for (int i = 0; i < SeriesArray.Count() + 1; i++)
            {
                //drawingContext.DrawLine(myPen, new Point(x, y), new Point(x, y + 4));
                points.Add(new Point(x, y));
                points.Add(new Point(x, y + 4));
                x = x + 120;
            }
            SnapDrawingExtensions.DrawSnappedLinesBetweenPoints(drawingContext, myPen, myPen.Thickness, points.ToArray());

            var xAxisPen = new Pen
            {
                Thickness = 1,
                Brush = (Brush)brushConverter.ConvertFromString("#E0E6F1")
            };
            xAxisPen.Freeze();
            var xAxis = h - 80;
            int max = Convert.ToInt32(SeriesArray.Max(kvp => kvp.Value));
            max = (max / 50 + (max % 50 == 0 ? 0 : 1)) * 50 / 50;
            int min = Convert.ToInt32(SeriesArray.Min(kvp => kvp.Value));
            points.Clear();
            for (int i = 0; i < max; i++)
            {
                //drawingContext.DrawLine(xAxisPen, new Point(startX, xAxis), new Point(width, xAxis));
                points.Add(new Point(startX, xAxis));
                points.Add(new Point(width, xAxis));
                stratNum += 50;
                formattedText = GetFormattedText(stratNum.ToString());
                drawingContext.DrawText(formattedText, new Point(startX - formattedText.Width - 10, xAxis - formattedText.Height / 2));
                xAxis = xAxis - 80;
            }
            SnapDrawingExtensions.DrawSnappedLinesBetweenPoints(drawingContext, xAxisPen, xAxisPen.Thickness, points.ToArray());

            x = startX;
            var rectWidth = 85;
            var rectHeight = 0D;
            for (int i = 0; i < SeriesArray.Count(); i++)
            {
                formattedText = GetFormattedText(SeriesArray.ToList()[i].Key);
                drawingContext.DrawText(formattedText, new Point(x + 120 / 2 - formattedText.Width / 2, y + 4));
                var _value = SeriesArray.ToList()[i].Value;
                //rectHeight = _value * 200;
                rectHeight = (_value - 0) / (stratNum - 0) * (80 * max);
                //rectHeight = (stratNum - _value) / 100 * stratNum;
                drawingContext.DrawRectangle(rectBrush, null, new Rect(x + (120 - 85) / 2, h - rectHeight, rectWidth, rectHeight));
                x = x + 120;
            }
        }
        FormattedText GetFormattedText(string text)
        {
            var brushConverter = new BrushConverter();
            return new FormattedText(
                 text,
                 CultureInfo.CurrentCulture,
                 FlowDirection.LeftToRight,
                 new Typeface(new FontFamily("Microsoft YaHei"), FontStyles.Normal, FontWeights.UltraLight, FontStretches.Normal),
                 12, (Brush)brushConverter.ConvertFromString("#6E7079"))
            {
                MaxLineCount = 1,
                TextAlignment = TextAlignment.Justify,
                Trimming = TextTrimming.CharacterEllipsis
            };
        }
    }
    public static class SnapDrawingExtensions
    {
        public static void DrawSnappedLinesBetweenPoints(this DrawingContext dc,
            Pen pen, double lineThickness, params Point[] points)
        {
            var guidelineSet = new GuidelineSet();
            foreach (var point in points)
            {
                guidelineSet.GuidelinesX.Add(point.X);
                guidelineSet.GuidelinesY.Add(point.Y);
            }
            var half = lineThickness / 2;
            points = points.Select(p => new Point(p.X + half, p.Y + half)).ToArray();
            dc.PushGuidelineSet(guidelineSet);
            for (var i = 0; i < points.Length - 1; i = i + 2)
            {
                dc.DrawLine(pen, points[i], points[i + 1]);
            }
            dc.Pop();
        }
    }
}

如何換算出統計條佔比如下：

二、建立BasicBarChartExample.xaml程式碼如下

WPF實現統計圖

<UserControl x:Class="WPFDevelopers.Samples.ExampleViews.BasicBarChartExample"
             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:local="clr-namespace:WPFDevelopers.Samples.ExampleViews"
             xmlns:wpfdev="https://github.com/yanjinhuagood/WPFDevelopers"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid Background="Gainsboro">
        <Border
            Height="500"
            Background="White"
            Margin="30,0">
            <Grid Margin="20,10">
                
                <Grid.RowDefinitions>
                    <RowDefinition Height="40" />
                    <RowDefinition />
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>
                <WrapPanel HorizontalAlignment="Right">
                    <Rectangle
                        Width="6"
                        Height="26"
                        Fill="Black" />
                    <TextBlock
                        Padding="10,0"
                        FontSize="24"
                        FontWeight="Black"
                        Text="{Binding KeyBarChart, RelativeSource={RelativeSource AncestorType=local:BasicBarChartExample}}" />
                </WrapPanel>
                <wpfdev:BasicBarChart
                     Grid.Row="1"
                    SeriesArray="{Binding SeriesModels, RelativeSource={RelativeSource AncestorType=local:BasicBarChartExample}}"/>
                <Button
                    Grid.Row="2"
                    Width="200"
                    VerticalAlignment="Bottom"
                    Click="Button_Click"
                    Content="重新整理"
                    Style="{StaticResource PrimaryButton}" />
            </Grid>
        </Border>
    </Grid>
</UserControl>

三、建立BasicBarChartExample.xaml.cs程式碼如下

WPF實現統計圖

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 WPFDevelopers.Samples.ExampleViews
{
    /// <summary>
    /// BasicBarChartExample.xaml 的互動邏輯
    /// </summary>
    public partial class BasicBarChartExample : UserControl
    {
        public IEnumerable<KeyValuePair<string, double>> SeriesModels
        {
            get { return (IEnumerable<KeyValuePair<string, double>>)GetValue(SeriesModelsProperty); }
            set { SetValue(SeriesModelsProperty, value); }
        }

        public static readonly DependencyProperty SeriesModelsProperty =
            DependencyProperty.Register("SeriesModels", typeof(IEnumerable<KeyValuePair<string, double>>), typeof(BasicBarChartExample), new PropertyMetadata(null));


        Dictionary<string, IEnumerable<KeyValuePair<string, double>>> keyValues = new Dictionary<string, IEnumerable<KeyValuePair<string, double>>>();
        public string KeyBarChart
        {
            get { return (string)GetValue(KeyBarChartProperty); }
            set { SetValue(KeyBarChartProperty, value); }
        }
        public static readonly DependencyProperty KeyBarChartProperty =
     DependencyProperty.Register("KeyBarChart", typeof(string), typeof(BasicBarChartExample), new PropertyMetadata(null));
        private int _index = 0;
        public BasicBarChartExample()
        {
            InitializeComponent();
            var Models1 = new[]
            {
                new KeyValuePair<string, double>("Mon", 120),
                new KeyValuePair<string, double>("Tue", 130),
                new KeyValuePair<string, double>("Wed", 160),
                new KeyValuePair<string, double>("Thu", 140),
                new KeyValuePair<string, double>("Fri", 200) ,
                new KeyValuePair<string, double>("Sat", 80) ,
                new KeyValuePair<string, double>("Sun", 90) ,
            };
            keyValues.Add("到訪數", Models1);
            var Models2 = new[]
            {
                new KeyValuePair<string, double>("蛐蛐", 120),
                new KeyValuePair<string, double>("常威", 170),
                new KeyValuePair<string, double>("來福", 30),
                new KeyValuePair<string, double>("包龍星", 200),
                new KeyValuePair<string, double>("包有為", 100) ,
                new KeyValuePair<string, double>("雷豹", 180) ,
                new KeyValuePair<string, double>("方唐鏡", 90) ,
            };
            keyValues.Add("能力值", Models2);

            SeriesModels = keyValues.ToList()[0].Value;
            KeyBarChart = keyValues.ToList()[0].Key;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            _index++;
            if (_index >= keyValues.Count)
            {
                _index = 0;
            }
            SeriesModels = keyValues.ToList()[_index].Value;
            KeyBarChart = keyValues.ToList()[_index].Key;
        }
    }
}

效果預覽

更多教程歡迎關注微信公眾號：加微信群限時

微信群人數太多掃碼進不來了，請新增個人微信邀請你（請標註理由）。（yanjinhuawechat）或（W_Feng_aiQ）

WPF開發者QQ群： 340500857

blogs： https://www.cnblogs.com/yanjinhua

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

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

快捷簡易統計圖表模型設計與實現
2020-04-16
模型
如何利用 Seaborn 實現高階統計圖表
2024-05-20
WPF 實現陰影效果
2018-09-21
WPF多表頭表格實現
2024-04-19
Simple WPF: WPF 實現按鈕的長按，短按功能
2024-07-08
WPF/C#：在WPF中如何實現依賴注入
2024-07-11
C#依賴注入
WPF實現手勢解鎖
2020-09-07
Oracle實現統計
2018-06-29
Oracle
c#（WPF）實現連連看
2018-04-07
C#
在WPF程式中實現PropertyGrid功能
2024-11-23
WPF/C#：實現導航功能
2024-07-18
C#
WPF/C#：如何實現拖拉元素
2024-06-27
C#
web 頁面如何實現 echarts 統計圖的列印匯出？
2020-06-15
WebEcharts
通過媒體查詢來實現 WPF 響應式設計
2022-03-12
分享一個開源的JavaScript統計圖表庫，40行程式碼實現專業統計圖表
2018-10-26
JavaScript行程
WPF手動實現切換頁面
2024-08-28
WPF 型別轉換器的實現
2024-08-19
型別
【Dotnet 工具箱】WPF UI - 現代化設計的開源 WPF 框架
2023-04-19
UI框架
python實現詞頻統計
2020-12-08
Python
圖形驗證碼設計實現
2018-04-04
基於Java+SpringBoot+vue+elementui圖書商城系統設計實現
2022-11-23
JavaSpring BootVueUI
WPF實現樹形下拉選單框(TreeComboBox)
2024-04-05
WPF實現html中的table控制元件
2024-03-26
HTML控制元件
WPF中以MVVM方式，實現RTSP影片播放
2023-09-25
MVVM
.NET 6.0 + WPF 使用 Prism 框架實現導航
2024-09-11
框架
WPF之AvalonEdit實現MVVM雙向繫結
2021-12-31
MVVM
WPF實現Win10漢堡選單
2021-10-18
Win10
WPF之小米Logo超圓角的實現
2021-04-26
Go
使用 WPF + Chrome 核心實現線上客服系統的複合客服端程式
2021-10-09
Chrome
WPF原始碼分析系列一：剖析WPF模板機制的內部實現（一）
2020-12-10
原始碼
WPF原始碼分析系列一：剖析WPF模板機制的內部實現（五）
2020-12-18
原始碼
python 實現中文分詞統計
2019-02-16
Python中文分詞
統計學習方法——實現AdaBoost
2021-04-23
WPF 實現檔案/資料夾監聽工具
2024-03-11
WPF使用Shape實現複雜線條動畫
2024-05-15
動畫
WPF中實現彈出進度條視窗
2024-11-22
利用著色器在WPF中實現陰影特效
2024-07-04
特效
WPF-3D圖形
2023-01-26
3D

WPF實現統計圖

相關文章