LiveCharts 运行时的多轴

Question

我正在尝试编写一个 WPF 应用程序来为我拥有的一系列数字绘制折线图。这些数字列在一个.CSV文件中，我将在运行时读取该文件。因此，我不知道我将拥有的系列数，也不知道每个系列的最大/最小值。

为了进行演示并简洁起见，请看以下示例。将这些系列值视为我将从.CSV实际应用程序中的文件中读取的值。

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        SeriesCollection = new SeriesCollection
        {
            new LineSeries
            {
                Title = "Series 1",
                Values = new ChartValues<double> { 4, 66, 5, 2, 4 },
            },
            new LineSeries
            {
                Title = "Series 2",
                Values = new ChartValues<double> { 6, 7, 3, 4, 6 },
            },
            new LineSeries
            {
                Title = "Series 3",
                Values = new ChartValues<double> { 4, 2, 7, 2, 7 },
            }
        };

        DataContext = this;
    }

    public SeriesCollection SeriesCollection { get; set; }
}

我的XAML看起来很简单，就像这样：

<Window x:Class="WPFCharts.MainWindow"
        ...
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <lvc:CartesianChart Series="{Binding SeriesCollection}"/>
    </Grid>
</Window>

正如您所看到的，如果我使用默认设置将其绘制在折线图中，则与其他值相比，一个系列中的一个值不在图表中LiveCharts：

所以我想让用户有机会将这样的折线图放在自己的轴上。通过阅读LiveCharts文档，我发现，如此处所示，您可以使用ScaleXAt和ScaleYAt属性将不同的线系列放在不同的轴上。

然而，该示例设置了轴，XAML而我想动态地执行此操作。所以我尝试在代码后面设置上述属性，如下所示：

SeriesCollection = new SeriesCollection
{
    new LineSeries
    {
        Title = "Series 1",
        Values = new ChartValues<double> { 4, 66, 5, 2, 4 },
        ScalesYAt = 0
    },
    new LineSeries
    {
        Title = "Series 2",
        Values = new ChartValues<double> { 6, 7, 3, 4, 6 },
        ScalesYAt = 1
    },
    new LineSeries
    {
        Title = "Series 3",
        Values = new ChartValues<double> { 4, 2, 7, 2, 7 },
        ScalesYAt = 2
    }
};

但是当我这样做并运行应用程序时，我收到一个异常：

System.ArgumentOutOfRangeException: '索引超出范围。必须为非负数且小于集合的大小。

我在这里做错了什么？我如何使用代码来设置它，而不是XAML？

Answer 1

如果你想使用不同的Y轴，那么你需要声明它们，也许你错过了。所以你的模型将变成这样：

public class ViewModel
{
    public ViewModel()
    {
        SeriesCollection = new SeriesCollection
        {
            new LineSeries
            {
                Title = "Series 1",
                Values = new ChartValues<double> { 4, 66, 5, 2, 4 },
                ScalesYAt = 0
            },
            new LineSeries
            {
                Title = "Series 2",
                Values = new ChartValues<double> { 6, 7, 3, 4, 6 },
                ScalesYAt = 1
            },
            new LineSeries
            {
                Title = "Series 3",
                Values = new ChartValues<double> { 4, 2, 7, 2, 7 },
                ScalesYAt = 2
            }
        };

        AxisYCollection = new AxesCollection
        {
            new Axis { Title = "Y Axis 1", Foreground = Brushes.Gray },
            new Axis { Title = "Y Axis 2", Foreground = Brushes.Red },
            new Axis { Title = "Y Axis 3", Foreground = Brushes.Brown }
        };
    }

    public AxesCollection AxisYCollection { get; set; }

    public SeriesCollection SeriesCollection { get; set; }

}

而 XAML 将是：

<Grid>
    <lvc:CartesianChart Series="{Binding SeriesCollection}" AxisY="{Binding AxisYCollection}" />
</Grid>

当然，您需要将类的实例设置ViewModel为DataContext窗口的实例：

public MainWindow()
{
    vm = new ViewModel();

    InitializeComponent();
    DataContext = vm;
}

如果您没有在 linked 中声明“足够”的 Axis AxesCollection，则不会找到其位于 n 索引处的元素，并且您将陷入ArgumentOutOfRangeException。我希望它可以帮助你。