在WPF中使用OxyPlot实现双Y轴图表的分离式图例显示

OxyPlot本身没有直接内置拆分图例的功能，但可以通过自定义WPF布局结合Legend控件的过滤逻辑，实现左右Y轴对应系列的图例分离。以下是具体实现步骤和示例代码：

核心思路 #

创建两个独立的Legend控件，分别筛选出绑定左Y轴和右Y轴的系列，然后将它们和PlotView放在同一布局容器中，实现视觉上的分离效果。

实现步骤与代码 #

1. 后台代码（完善基础图表逻辑） #

先修正原有代码中的标题重复问题，并准备好系列数据，同时为后续图例筛选做分组：

using OxyPlot;
using OxyPlot.Axes;
using OxyPlot.Series;
using OxyPlot.Wpf;
using System.Collections.Generic;
using System.Linq;
using System.Windows;

namespace WpfOxyPlotDemo
{
    public partial class MainWindow : Window
    {
        public PlotModel PlotModel { get; set; }
        // 分别存储左右轴的系列，供图例绑定
        public List<Series> LeftAxisSeries { get; set; }
        public List<Series> RightAxisSeries { get; set; }

        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;
            CreatePlot();
        }

        private void CreatePlot()
        {
            PlotModel = new PlotModel { Title = "双Y轴分离图例示例" };

            // 创建左右Y轴
            var leftAxis = new LinearAxis
            {
                Position = AxisPosition.Left,
                Key = "LeftAxis",
                Title = "左Y轴",
                Foreground = OxyColors.Red
            };

            var rightAxis = new LinearAxis
            {
                Position = AxisPosition.Right,
                Key = "RightAxis",
                Title = "右Y轴",
                Foreground = OxyColors.Blue
            };

            PlotModel.Axes.Add(leftAxis);
            PlotModel.Axes.Add(rightAxis);

            // 创建右轴系列
            var series0 = new LineSeries
            {
                YAxisKey = rightAxis.Key,
                Title = "右轴系列",
                Color = OxyColors.Blue,
                ItemsSource = GenerateData(0, 10)
            };

            // 创建左轴系列
            var series1 = new LineSeries
            {
                YAxisKey = leftAxis.Key,
                Title = "左轴系列",
                Color = OxyColors.Red,
                ItemsSource = GenerateData(5, 20)
            };

            // 添加系列到图表
            PlotModel.Series.Add(series0);
            PlotModel.Series.Add(series1);

            // 按轴分组系列，供图例绑定
            LeftAxisSeries = PlotModel.Series.Where(s => s.YAxisKey == leftAxis.Key).ToList();
            RightAxisSeries = PlotModel.Series.Where(s => s.YAxisKey == rightAxis.Key).ToList();
        }

        // 生成模拟数据
        private List<DataPoint> GenerateData(double startY, double range)
        {
            var data = new List<DataPoint>();
            for (int x = 0; x < 10; x++)
            {
                double y = startY + new Random().NextDouble() * range;
                data.Add(new DataPoint(x, y));
            }
            return data;
        }
    }
}

2. XAML布局（放置PlotView和两个Legend） #

在XAML中使用Grid布局容器将图表和两个图例排列，分别绑定对应轴的系列：

<Window x:Class="WpfOxyPlotDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:oxy="http://oxyplot.org/wpf"
        Title="双Y轴分离图例" Height="450" Width="800">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="150"/>
            <ColumnDefinition Width="150"/>
        </Grid.ColumnDefinitions>

        <!-- 主图表 -->
        <oxy:PlotView Model="{Binding PlotModel}" Grid.Column="0"/>

        <!-- 左轴图例 -->
        <oxy:Legend Grid.Column="1" 
                    ItemsSource="{Binding LeftAxisSeries}"
                    Title="左轴系列"
                    Margin="5"/>

        <!-- 右轴图例 -->
        <oxy:Legend Grid.Column="2" 
                    ItemsSource="{Binding RightAxisSeries}"
                    Title="右轴系列"
                    Margin="5"/>
    </Grid>
</Window>

关键说明 #

• 通过将系列按YAxisKey分组，分别绑定到两个独立的Legend控件，实现图例的分离显示。
• 可以修改Legend的Title、Foreground、Background等属性，让图例和对应轴的样式保持一致，提升视觉一致性。
• 如果需要调整图例位置（如放在图表上方/下方），只需修改Grid的行/列定义即可。

内容的提问来源于stack exchange，提问作者ceso