【Chart控件】DotNetProjects.DataVisualization.Toolkit 控件库

WPF没有系统的Chart控件，因此要使用第三方的chart控件库

DataVisualization.Toolkit Chart控件结构

 

 

 

 

 

 

 

 

 

 

Chart控件库功能

1、在Nuget中添加DotNetProjects.DataVisualization.Toolkit。
System.Windows.Controls.DataVisualization.Charting

在System.Windows.Controls.DataVisualization.Charting空间下可以定义下面7种图形
1、LineSeries 线性图
2、PieSeries 饼图
3、ColumnSeries 柱形图
4、AreaSeries 区域图
5、BarSeries 条状图
6、ScatterSeries 散点图
7、BubbleSeries 气泡图

8、Stacked Series(栈序列图)

 Chart功能介绍

(1)图例设置

 <!--表格的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>

(2)绘图区设置

   <!--表格的绘图区域  将绘图区背景色设置为透明 -->
            <chart:Chart.PlotAreaStyle>
                <Style TargetType="Grid">
                    <Setter Property="Panel.Background" Value="Transparent"/>
                </Style>
            </chart:Chart.PlotAreaStyle>

(3)标题区设置

      <!--表格的标题 设置标题，默认为null-->
            <chart:Chart.Title >
                饼状图 Demo
            </chart:Chart.Title>

(4)坐标轴 区设置

  
    <!--表格的坐标轴 设置-->
            <chart:Chart.Axes>
                <chart:LinearAxis Orientation="X" Interval="1" Title="次数"></chart:LinearAxis>
                <chart:LinearAxis Orientation="Y" Interval="0.5" Title="高度"></chart:LinearAxis>
            </chart:Chart.Axes>

 

(5)设置色板Palette

Background背景属性可以是画刷或者纯色
 <!--饼状图的调色板 使用共同的Key表示一组色块-->
            <chart:Chart.Palette>
                <datavis:ResourceDictionaryCollection>

                    <ResourceDictionary>

                        <Style x:Key="DataPointStyle" TargetType="{x:Type chart:PieDataPoint}">
                            <Setter Property="Background">
                                <Setter.Value>
                                    <RadialGradientBrush MappingMode="Absolute">
                                        <GradientStop Color="LightGray"    Offset="0.8" />
                                        <GradientStop Color="DarkGray"  Offset="1.0" />
                                    </RadialGradientBrush>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="BorderBrush" Value="Transparent" />

                        </Style>
                     
                    </ResourceDictionary>

                    <ResourceDictionary>
                        <!-- 也可以写成 <Style x:Key="DataPointStyle" TargetType="Control">-->
                        <Style x:Key="DataPointStyle" TargetType="{x:Type chart:PieDataPoint}">
                            <Setter Property="Background">
                                <Setter.Value>
                                    <RadialGradientBrush MappingMode="Absolute">
                                        <GradientStop Color="Lime"    Offset="0.1" />
                                        <GradientStop Color="LimeGreen"  Offset="1.0" />
                                    </RadialGradientBrush>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="BorderBrush" Value="Transparent" />

                        </Style>
                    </ResourceDictionary>
                    
                    <ResourceDictionary>
                        <!-- 也可以写成 <Style x:Key="DataPointStyle" TargetType="Control">-->
                        <Style x:Key="DataPointStyle" TargetType="{x:Type chart:PieDataPoint}">
                            <Setter Property="Background" Value="#f15c22" />
                            <Setter Property="BorderBrush" Value="White" />

                        </Style>
                    </ResourceDictionary>
                    
                    <ResourceDictionary>
                        <Style x:Key="DataPointStyle" TargetType="{x:Type chart:PieDataPoint}">
                            <Setter Property="Background" Value="#ffd503" />
                            <Setter Property="BorderBrush" Value="White" />

                        </Style>
                    </ResourceDictionary>

                    <ResourceDictionary>
                        <Style x:Key="DataPointStyle" TargetType="{x:Type chart:PieDataPoint}">
                            <Setter Property="Background" Value="#93b9b1" />
                            <Setter Property="BorderBrush" Value="White" />

                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <Style x:Key="DataPointStyle" TargetType="{x:Type chart:PieDataPoint}">
                            <Setter Property="Background" Value="#a78462" />
                            <Setter Property="BorderBrush" Value="White" />

                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <Style x:Key="DataPointStyle" TargetType="{x:Type chart:PieDataPoint}">
                            <Setter Property="Background" Value="#00394b" />
                            <Setter Property="BorderBrush" Value="White" />

                        </Style>
                    </ResourceDictionary>
                </datavis:ResourceDictionaryCollection>
            </chart:Chart.Palette>

(6)表格的序列设置

 xaml

 <!--表格的序列-->
            <chart:PieSeries ItemsSource="{Binding}"
                    DependentValuePath="Value"
                  
                    IndependentValuePath="Key"
                    Title="Pet Preference" IsSelectionEnabled="True">

            </chart:PieSeries>

C#代码

 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) };
        }

 

 效果

完整的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:datavis="clr-namespace:System.Windows.Controls.DataVisualization;assembly=DotNetProjects.DataVisualization.Toolkit"
         
        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>



            <!--表格的标题 设置标题，默认为null-->
            <chart:Chart.Title >
                饼状图 Demo
            </chart:Chart.Title>

            <!--表格的序列-->
            <chart:PieSeries ItemsSource="{Binding}"
                    DependentValuePath="Value"
                  
                    IndependentValuePath="Key"
                    Title="Pet Preference" IsSelectionEnabled="True">

            </chart:PieSeries>

            <!--饼状图的调色板 使用共同的Key表示一组色块-->
            <chart:Chart.Palette>
                <datavis:ResourceDictionaryCollection>

                    <ResourceDictionary>

                        <Style x:Key="DataPointStyle" TargetType="{x:Type chart:PieDataPoint}">
                            <Setter Property="Background">
                                <Setter.Value>
                                    <RadialGradientBrush MappingMode="Absolute">
                                        <GradientStop Color="LightGray"    Offset="0.8" />
                                        <GradientStop Color="DarkGray"  Offset="1.0" />
                                    </RadialGradientBrush>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="BorderBrush" Value="Transparent" />

                        </Style>
                     
                    </ResourceDictionary>

                    <ResourceDictionary>
                        <!-- 也可以写成 <Style x:Key="DataPointStyle" TargetType="Control">-->
                        <Style x:Key="DataPointStyle" TargetType="{x:Type chart:PieDataPoint}">
                            <Setter Property="Background">
                                <Setter.Value>
                                    <RadialGradientBrush MappingMode="Absolute">
                                        <GradientStop Color="Lime"    Offset="0.1" />
                                        <GradientStop Color="LimeGreen"  Offset="1.0" />
                                    </RadialGradientBrush>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="BorderBrush" Value="Transparent" />

                        </Style>
                    </ResourceDictionary>
                    
                    <ResourceDictionary>
                        <!-- 也可以写成 <Style x:Key="DataPointStyle" TargetType="Control">-->
                        <Style x:Key="DataPointStyle" TargetType="{x:Type chart:PieDataPoint}">
                            <Setter Property="Background" Value="#f15c22" />
                            <Setter Property="BorderBrush" Value="White" />

                        </Style>
                    </ResourceDictionary>
                    
                    <ResourceDictionary>
                        <Style x:Key="DataPointStyle" TargetType="{x:Type chart:PieDataPoint}">
                            <Setter Property="Background" Value="#ffd503" />
                            <Setter Property="BorderBrush" Value="White" />

                        </Style>
                    </ResourceDictionary>

                    <ResourceDictionary>
                        <Style x:Key="DataPointStyle" TargetType="{x:Type chart:PieDataPoint}">
                            <Setter Property="Background" Value="#93b9b1" />
                            <Setter Property="BorderBrush" Value="White" />

                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <Style x:Key="DataPointStyle" TargetType="{x:Type chart:PieDataPoint}">
                            <Setter Property="Background" Value="#a78462" />
                            <Setter Property="BorderBrush" Value="White" />

                        </Style>
                    </ResourceDictionary>
                    <ResourceDictionary>
                        <Style x:Key="DataPointStyle" TargetType="{x:Type chart:PieDataPoint}">
                            <Setter Property="Background" Value="#00394b" />
                            <Setter Property="BorderBrush" Value="White" />

                        </Style>
                    </ResourceDictionary>
                </datavis:ResourceDictionaryCollection>
            </chart:Chart.Palette>
            
            <!--表格的坐标轴 设置-->
            <chart:Chart.Axes>
                <chart:LinearAxis Orientation="X" Interval="1" Title="次数"></chart:LinearAxis>
                <chart:LinearAxis Orientation="Y" Interval="0.5" Title="高度"></chart:LinearAxis>
            </chart:Chart.Axes>

        </chart:Chart>

    </Grid>
</Window>

 

 

 

 

 

 

 

 

 

posted @ 2022-12-10 14:14  小林野夫  阅读(258)  评论(0)  编辑  收藏  举报
原文链接：https://www.cnblogs.com/cdaniu/