WPF入门：加入图表与绑定数据

---

前言

根据网上的资料，整理了下Wpf的柱状图，折线图和饼状图的创建，并且绑定后端数据

---

一、安装dll

从Nuget中下载dll

二、编写图形

1.图形展示

---

2.代码

以上新建窗口代码如下：

<Window x:Class="WpfApp2.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:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
        xmlns:local="clr-namespace:WpfApp2"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="看板" Height="650" Width="1000">
    <Grid Background="Black">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <!--柱状图-->
            <Grid Grid.Column="0">
                <lvc:CartesianChart Margin="10,10,10,5">
                    <!--x轴-->
                    <lvc:CartesianChart.AxisX>
                        <lvc:Axis Labels="1,2,3,4,5,6,7,8,9">
                            <lvc:Axis.Separator>
                                <lvc:Separator Step="1" StrokeThickness="0"></lvc:Separator>
                            </lvc:Axis.Separator>
                        </lvc:Axis>
                    </lvc:CartesianChart.AxisX>

                    <!--y轴-->
                    <lvc:CartesianChart.Series>
                        <lvc:ColumnSeries Values="{Binding Y1LineSeries}" Title="y1数据"  MaxColumnWidth="10">
                            <!--渐变色-->
                            <lvc:ColumnSeries.Fill>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Color="#5ba585" Offset="0"></GradientStop>
                                    <GradientStop Color="#a0c69d" Offset="1"></GradientStop>
                                </LinearGradientBrush>
                            </lvc:ColumnSeries.Fill>
                        </lvc:ColumnSeries>

                        <lvc:ColumnSeries Values="15,55,15,40,38,45,56,42,24" Title="y2数据"  MaxColumnWidth="10">
                            <!--渐变色-->
                            <lvc:ColumnSeries.Fill>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Color="#e5c5c8" Offset="0"></GradientStop>
                                    <GradientStop Color="#ca5863" Offset="1"></GradientStop>
                                </LinearGradientBrush>
                            </lvc:ColumnSeries.Fill>
                        </lvc:ColumnSeries>
                    </lvc:CartesianChart.Series>

                    <!--Y刻度-->
                    <lvc:CartesianChart.AxisY>
                        <lvc:Axis MinValue="0" MaxValue="500" >
                            <lvc:Axis.Separator>
                                <lvc:Separator Step="100" Stroke="#11ffffff"></lvc:Separator>
                            </lvc:Axis.Separator>
                        </lvc:Axis>
                    </lvc:CartesianChart.AxisY>
                </lvc:CartesianChart>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="10">
                    <Border Height="6" Width="6" Background="#5ba585"  Margin="5,0"></Border>
                    <TextBlock Text="y1数据" FontSize="10" Foreground="#44ffffff"></TextBlock>

                    <Border Height="6" Width="6" Background="#ca5863"  Margin="5,0"></Border>
                    <TextBlock Text="y2数据" FontSize="10" Foreground="#44ffffff"></TextBlock>
                </StackPanel>
            </Grid>
            <!--饼状图-->
            <Grid Grid.Column="1">
                <!--定义数据标签样式-->
                <lvc:PieChart InnerRadius="45" Margin="10,20,0,10">
                    <!--饼形图数据显示-->
                    <lvc:PieChart.Resources>
                        <Style TargetType="lvc:PieSeries">
                            <Setter Property="DataLabelsTemplate">
                                <Setter.Value>
                                    <DataTemplate>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="{Binding Point.SeriesView.Title}" Margin="0,0,5,0" Foreground="#44ffffff"></TextBlock>
                                            <TextBlock Text="{Binding Point.SeriesView.Values[0]}" Foreground="#44ffffff"></TextBlock>
                                        </StackPanel>
                                    </DataTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </lvc:PieChart.Resources>
                    <!--饼形图数据-->
                    <lvc:PieChart.Series>
                        <lvc:PieSeries Values="20" Title="a" StrokeThickness="0" DataLabels="True" LabelPosition="OutsideSlice"></lvc:PieSeries>
                        <lvc:PieSeries Values="30" Title="b" StrokeThickness="0" DataLabels="True" LabelPosition="OutsideSlice"></lvc:PieSeries>
                        <lvc:PieSeries Values="35" Title="c" StrokeThickness="0" DataLabels="True" LabelPosition="OutsideSlice"></lvc:PieSeries>
                        <lvc:PieSeries Values="40" Title="d" StrokeThickness="0" DataLabels="True" LabelPosition="OutsideSlice"></lvc:PieSeries>
                    </lvc:PieChart.Series>
                </lvc:PieChart>
            </Grid>
        </Grid>
        <!--折线图-->
        <Grid Grid.Row="1">
            <lvc:CartesianChart Margin="10,10,10,5">
                <lvc:CartesianChart.AxisX>
                    <lvc:Axis Labels="1,2,3,4,5,6">
                        <lvc:Axis.Separator>
                            <lvc:Separator Step="1" StrokeThickness="0"></lvc:Separator>
                        </lvc:Axis.Separator>
                    </lvc:Axis>
                </lvc:CartesianChart.AxisX>

                <!--Y数据-->
                <lvc:CartesianChart.Series>
                    <lvc:LineSeries Values="7,14,5,6,10,12" PointGeometrySize="0" Stroke="#5ba585" >
                        <!--渐变-->
                        <lvc:LineSeries.Fill>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="#5ba585" Offset="0"></GradientStop>
                                <GradientStop Color="Transparent" Offset="1"></GradientStop>
                            </LinearGradientBrush>
                        </lvc:LineSeries.Fill>
                    </lvc:LineSeries>
                </lvc:CartesianChart.Series>

                <!--Y刻度-->
                <lvc:CartesianChart.AxisY>
                    <lvc:Axis MinValue="0" MaxValue="15" >
                        <lvc:Axis.Separator>
                            <lvc:Separator Step="5" Stroke="#11ffffff"></lvc:Separator>
                        </lvc:Axis.Separator>
                    </lvc:Axis>
                </lvc:CartesianChart.AxisY>
            </lvc:CartesianChart>
        </Grid>
    </Grid>
</Window>

---

3.绑定数据

采用mvvm结构，新建ViewModels文件夹与MainWindowVM类
MainWindowVM类代码如下（Y1LineSeries为绑定数据）：

using LiveCharts;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WpfApp2.ViewModels
{
    class MainWindowVM : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler? PropertyChanged;

        public ChartValues<double> Y1LineSeries { get; set; }

        public MainWindowVM()
        {
            Random random = new Random();

            Y1LineSeries = new ChartValues<double>();
            int Count = 0;

            Task.Run(() =>
            {
                while (Count<9)
                {
                    Y1LineSeries.Add(random.Next(0, 500));

                    Count++;
                    Thread.Sleep(2000);
                }
            });
        }
    }
}

前台界面MainWindow.xaml引入上面文件：

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;
using WpfApp2.ViewModels;

namespace WpfApp2
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        /// <summary>
        /// 视图模型
        /// </summary>
        MainWindowVM mainWindowVM = new MainWindowVM();
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = mainWindowVM;//引用viewmodel文件
        }
    }
}

完成后运行可看到柱状图y1数据随机显示，y2数据固定显示