3.2 WPF 画散点图

1. 前端xaml代码

        前端代码如下：

<Window x:Class="scatters.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:scatters"
        mc:Ignorable="d"
        xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
        Title="MainWindow" Height="900" Width="1200" WindowStartupLocation="CenterScreen">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Margin="10" Click="RandomizeOnClick">Randomize</Button>
        <lvc:CartesianChart Grid.Row="1" LegendLocation="Bottom">
            <lvc:CartesianChart.Series>
                <lvc:ScatterSeries Title="Series A" Values="{Binding ValuesA}"/>
                <lvc:ScatterSeries Title="Series B" Values="{Binding ValuesB}"
                                   PointGeometry="{x:Static lvc:DefaultGeometries.Diamond}"/>
                <lvc:ScatterSeries Title="Series C" Values="{Binding ValuesC}"
                                   PointGeometry="{x:Static lvc:DefaultGeometries.Triangle}"
                                   StrokeThickness="2" Fill="Transparent"/>
            </lvc:CartesianChart.Series>
            <lvc:CartesianChart.AxisY>
                <!--setting the axis unit improved the labels rounding rule-->
                <lvc:Axis Unit="1"></lvc:Axis>
            </lvc:CartesianChart.AxisY>
        </lvc:CartesianChart>
    </Grid>
</Window>

        以上代码中，<Grid>上面的代码是自己生成的，里面有一行是我们加入的，这一行是：

xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"

        <Grid> ...</Grid>之间的所有代码复制到里面就行。

2.后端cs文件代码

        在cs文件中的代码如下：

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.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 LiveCharts;
using LiveCharts.Defaults;
using LiveCharts.Wpf;
using static System.Net.WebRequestMethods;


namespace scatters
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            var r = new Random();
            ValuesA = new ChartValues<ObservablePoint>();
            ValuesB = new ChartValues<ObservablePoint>();
            ValuesC = new ChartValues<ObservablePoint>();

            for (var i = 0; i < 20; i++)
            {
                ValuesA.Add(new ObservablePoint(r.NextDouble() * 10, r.NextDouble() * 10));
                ValuesB.Add(new ObservablePoint(r.NextDouble() * 10, r.NextDouble() * 10));
                ValuesC.Add(new ObservablePoint(r.NextDouble() * 10, r.NextDouble() * 10));
            }
            DataContext = this;
        }

        public ChartValues<ObservablePoint> ValuesA { get; set; }
        public ChartValues<ObservablePoint> ValuesB { get; set; }
        public ChartValues<ObservablePoint> ValuesC { get; set; }

        private void RandomizeOnClick(object sender, RoutedEventArgs e)
        {
            var r = new Random();
            for (var i = 0; i < 20; i++)
            {
                //ValuesA[i].X = r.NextDouble() * 10;
                ValuesA[i].X = i;
                ValuesA[i].Y = r.NextDouble() + 4;
                //ValuesB[i].X = r.NextDouble() * 10;
                ValuesB[i].X = i;
                ValuesB[i].Y = r.NextDouble() + 7;
                //ValuesC[i].X = r.NextDouble() * 10;
                ValuesC[i].X = i;
                ValuesC[i].Y = r.NextDouble() + 10;
            }
        }
    }
}

        在以上代码中，头文件有LiveCharts，这个我们需要进入 工具--->NuNet 包管理器--->管理解决方案，进入后搜索LiveCharts，然后点击安装即可。

3.最终效果

        最后运行代码，运行结果如下：