当前位置：首页 > news >正文

3.2 WPF 画散点图

news 2025/7/15 8:24:43

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，然后点击安装即可。