1. 程式人生 > 其它 >【Chart控制元件】餅狀圖

【Chart控制元件】餅狀圖

WPF沒有系統的Chart控制元件,因此要使用第三方的chart控制元件庫

1、在Nuget中新增DotNetProjects.DataVisualization.Toolkit。

Chart控制元件結構

餅狀圖

效果

xaml

<Window x:Class="testControl.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:testControl" xmlns:chart="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=DotNetProjects.DataVisualization.Toolkit"
xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=DotNetProjects.DataVisualization.Toolkit" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Window.Resources> <Style x:Key="PieChartLegendItemStyle" TargetType
="{x:Type chart:LegendItem}"> <Setter Property="IsTabStop" Value="False" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type chart:LegendItem}"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <StackPanel Orientation="Horizontal"> <Rectangle Width="8" Height="8" Fill="{Binding Background}" Stroke="{Binding BorderBrush}" StrokeThickness="0" Margin="0,0,3,0" /> <visualizationToolkit:Title Content="{TemplateBinding Content}" /> </StackPanel> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="PieSeriesStyle1" TargetType="{x:Type chart:PieSeries}"> <Setter Property="IsTabStop" Value="False"/> <Setter Property="Margin" Value="0"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type chart:PieSeries}"> <Canvas x:Name="PlotArea" Margin="0" /> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <Grid> <!--表格--> <chart:Chart Height="271" Name="chart1" Width="379" BorderThickness="0" > <!--表格的LegEnd--> <chart:Chart.LegendStyle> <Style TargetType="visualizationToolkit:Legend"> <Setter Property="Visibility" Value="Collapsed"/> <Setter Property="Width" Value="0"/> <Setter Property="Height" Value="0"/> </Style> </chart:Chart.LegendStyle> <!--表格的繪圖區域 --> <chart:Chart.PlotAreaStyle> <Style TargetType="Grid"> <Setter Property="Panel.Background" Value="Transparent"/> </Style> </chart:Chart.PlotAreaStyle> <!--表格的序列--> <chart:Chart.Series > <!--餅狀圖--> <chart:PieSeries ItemsSource="{Binding}" DependentValuePath="Value" IndependentValuePath="Key" Title="Pet Preference" IsSelectionEnabled="True" /> </chart:Chart.Series> </chart:Chart> </Grid> </Window>

C# 程式碼

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.DataVisualization.Charting;
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 testControl
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            chart1.DataContext = new KeyValuePair<string, int>[] {
                                    new KeyValuePair<string, int>("Dog", 30),
                                    new KeyValuePair<string, int>("Cat", 25),
                                    new KeyValuePair<string, int>("Rat", 5),
                                    new KeyValuePair<string, int>("Hampster", 8),
                                    new KeyValuePair<string, int>("Rabbit", 12) };
        }
      
    }


}