C# WPF LiveCharts 多线条图表绘制与保存图片教程 - 白色背景

要在 C# WPF 中使用 LiveCharts 的 LineSeries 和 ItemsControl 来绘制多条线条并保存图片，可以按照以下步骤进行操作：

1. 首先，安装 LiveCharts 和 LiveCharts.Wpf NuGet 包。

2. 在 XAML 中创建一个 Grid 布局，并在其中添加一个 Chart 控件和一个 Button 控件，用于保存图片。

<Grid>
    <lvc:CartesianChart x:Name="chart" Background="White" Width="800" Height="600">
        <lvc:CartesianChart.Series>
            <lvc:LineSeries Title="Series 1" Values="{Binding Series1}" PointGeometrySize="5" />
            <lvc:LineSeries Title="Series 2" Values="{Binding Series2}" PointGeometrySize="5" />
            <!-- 添加更多的 LineSeries，根据需要进行设置 -->
        </lvc:CartesianChart.Series>
    </lvc:CartesianChart>
    
    <Button Content="Save Image" Click="SaveImage_Click" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,20,0,0" />
</Grid>

3. 在 C# 代码中，创建一个 ViewModel 类，用于设置 LineSeries 的数据源。

public class ViewModel
{
    public ChartValues<double> Series1 { get; set; }
    public ChartValues<double> Series2 { get; set; }
    // 添加更多的 ChartValues，根据需要进行设置

    public ViewModel()
    {
        Series1 = new ChartValues<double> { 1, 3, 2, 5, 4 };
        Series2 = new ChartValues<double> { 2, 4, 1, 3, 5 };
        // 初始化更多的 ChartValues，根据需要进行设置
    }
}

4. 在 MainWindow 的构造函数中设置 DataContext，并为保存图片的按钮添加点击事件。

public MainWindow()
{
    InitializeComponent();

    // 设置 DataContext
    DataContext = new ViewModel();
}

private void SaveImage_Click(object sender, RoutedEventArgs e)
{
    // 创建一个 RenderTargetBitmap 对象，并以 chart 作为参数进行初始化
    RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap((int)chart.ActualWidth, (int)chart.ActualHeight, 96, 96, PixelFormats.Pbgra32);
    
    // 对 chart 进行渲染，并将结果存储到 renderTargetBitmap
    renderTargetBitmap.Render(chart);

    // 创建一个 PngBitmapEncoder 对象，并以 renderTargetBitmap 作为参数进行初始化
    PngBitmapEncoder pngImage = new PngBitmapEncoder();
    pngImage.Frames.Add(BitmapFrame.Create(renderTargetBitmap));

    // 保存图片
    using (FileStream fileStream = new FileStream("chart.png", FileMode.Create))
    {
        pngImage.Save(fileStream);
    }
}

现在，运行程序并点击保存图片按钮，即可将含有多条线条的 LiveCharts 图表保存为一张白色背景的 PNG 图片。