如何在Avalonia的LiveCharts2蜡烛图中将价格轴移至右侧

要实现将价格轴（Y轴）从左侧移到右侧，只需显式定义Y轴并指定其位置为右侧即可——默认情况下LiveCharts会自动生成左侧的Y轴，手动声明后会覆盖默认行为。

步骤1：修改ViewModel，添加右侧Y轴定义 #

在你的ViewModel中新增YAxes属性，创建Axis实例并设置Position = AxisPosition.End：

using System;
using System.Linq;
using CommunityToolkit.Mvvm.ComponentModel;
using LiveChartsCore;
using LiveChartsCore.Defaults;
using LiveChartsCore.SkiaSharpView;

namespace ViewModelsSamples.Financial.BasicCandlesticks;

public partial class ViewModel : ObservableObject
{
    public ViewModel()
    {
        var data = new FinancialData[]
        {
            new(new DateTime(2021, 1, 1), 523, 500, 450, 400),
            new(new DateTime(2021, 1, 2), 500, 450, 425, 400),
            new(new DateTime(2021, 1, 3), 490, 425, 400, 380),
            new(new DateTime(2021, 1, 4), 420, 400, 420, 380),
            new(new DateTime(2021, 1, 5), 520, 420, 490, 400),
            new(new DateTime(2021, 1, 6), 580, 490, 560, 440),
            new(new DateTime(2021, 1, 7), 570, 560, 350, 340),
            new(new DateTime(2021, 1, 8), 380, 350, 380, 330),
            new(new DateTime(2021, 1, 9), 440, 380, 420, 350),
            new(new DateTime(2021, 1, 10), 490, 420, 460, 400),
            new(new DateTime(2021, 1, 11), 520, 460, 510, 460),
            new(new DateTime(2021, 1, 12), 580, 510, 560, 500),
            new(new DateTime(2021, 1, 13), 600, 560, 540, 510),
            new(new DateTime(2021, 1, 14), 580, 540, 520, 500),
            new(new DateTime(2021, 1, 15), 580, 520, 560, 520),
            new(new DateTime(2021, 1, 16), 590, 560, 580, 520),
            new(new DateTime(2021, 1, 17), 650, 580, 630, 550),
            new(new DateTime(2021, 1, 18), 680, 630, 650, 600),
            new(new DateTime(2021, 1, 19), 670, 650, 600, 570),
            new(new DateTime(2021, 1, 20), 640, 600, 610, 560),
            new(new DateTime(2021, 1, 21), 630, 610, 630, 590)
        };

        Series = new ISeries[]
        {
            new CandlesticksSeries<FinancialPointI>
            {
                Values = data
                    .Select(x => new FinancialPointI(x.High, x.Open, x.Close, x.Low))
                    .ToArray()
            }
        };

        XAxes = new[]
        {
            new Axis
            {
                LabelsRotation = 15,
                Labels = data
                    .Select(x => x.Date.ToString("yyyy MMM dd"))
                    .ToArray()
            }
        };

        // 新增右侧Y轴定义
        YAxes = new[]
        {
            new Axis
            {
                Position = LiveChartsCore.Measure.AxisPosition.End // 指定轴在右侧
            }
        };
    }

    public Axis[] XAxes { get; set; }
    public Axis[] YAxes { get; set; } // 新增Y轴属性
    public ISeries[] Series { get; set; }
}

public class FinancialData
{
    public FinancialData(DateTime date, double high, double open, double close, double low)
    {
        Date = date;
        High = high;
        Open = open;
        Close = close;
        Low = low;
    }

    public DateTime Date { get; set; }
    public double High { get; set; }
    public double Open { get; set; }
    public double Close { get; set; }
    public double Low { get; set; }
}

步骤2：修改AXAML，绑定YAxes属性 #

在CartesianChart中添加YAxes绑定：

<lvc:CartesianChart Series="{Binding Series}" XAxes="{Binding XAxes}" YAxes="{Binding YAxes}" ZoomMode="X" >
</lvc:CartesianChart>

修改完成后，蜡烛图的价格轴就会显示在图表右侧。

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