WPF中使用LiveCharts绘制散点图

两仪风2024-03-15 11:16

一、背景

这里的代码使用MVVM模式进行编写

二、Model

复制代码

public class DataPoint
    {
        public double X { get; set; }
        public double Y { get; set; }
    }

三、ViewModel

cs 复制代码

public class ScatterChartViewModel
    {


        public SeriesCollection Series { get; set; }


        public ScatterChartViewModel()
        {
            //初始化数据
            var dataPoints = new List<DataPoint>
            {
                new DataPoint { X= 1, Y= 10 },
                new DataPoint { X= 2, Y= 20 },
                new DataPoint { X= 3, Y= 15 },
            };


            Series = new SeriesCollection()
            {
                new ScatterSeries
                {
                    Title = "Data",
                    Values = new ChartValues<ObservablePoint>(posPoints.Select(dp => new ObservablePoint(dp.X, dp.Y)))
                }
            };        
        }  

    }

四、View

cs 复制代码

<Window x:Class="DisplayData.Views.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:DisplayData.Views"
        mc:Ignorable="d"
        xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
        Title="Data" Height="900" Width="1200" WindowStartupLocation="CenterScreen">
    <Grid>          
            <lvc:CartesianChart Series="{Binding Series}" BorderBrush="#7ADA95" BorderThickness="1">
            </lvc:CartesianChart>       
    </Grid>
</Window>

cs 复制代码

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new ScatterChartViewModel();
        }
    }