c# How to invert Y Axis with Live Charts

问题:

I'm trying to simply invert the Y Axis so this graph it goes up instead of down.

Starting at 6 going up to 1.

This is the user doc on inverted graphs

https://lvcharts.net/App/examples/v1/wpf/Inverted%20Series

This is the example I used to build the chart

https://lvcharts.net/App/examples/v1/wpf/Date%20Time

The user doc states every live series has an inverted class and for the LineSeries class its simply VerticalLineSeries which I've changed the DateTime example to. However the graph still goes upwards from 1-6. What am I missing?

public partial class MainWindow : Window
{
    public Func<double, string> Formatter { get; set; }
    public SeriesCollection Series { get; set; }

    public MainWindow()
    {
        InitializeComponent();

        var dayConfig = Mappers.Xy<DateModel>()
            .X(dayModel => (double)dayModel.DateTime.Ticks / TimeSpan.FromHours(1).Ticks)
            .Y(dayModel => dayModel.Value);

        Series = new SeriesCollection(dayConfig)
        {
            new VerticalLineSeries
            {
                Values = new ChartValues<DateModel>
                {
                    new DateModel
                    {
                        DateTime = System.DateTime.Now,
                        Value = 6
                    },
                    new DateModel
                    {
                        DateTime = System.DateTime.Now.AddHours(1),
                        Value = 5
                    },
                    new DateModel
                    {
                        DateTime = System.DateTime.Now.AddHours(2),
                        Value = 4
                    },
                    new DateModel
                    {
                        DateTime = System.DateTime.Now.AddHours(3),
                        Value = 3
                    },
                    new DateModel
                    {
                        DateTime = System.DateTime.Now.AddHours(4),
                        Value = 2
                    },
                    new DateModel
                    {
                        DateTime = System.DateTime.Now.AddHours(5),
                        Value = 1
                    }
                },
                Fill = Brushes.Transparent
            }
        };

        Formatter = value => new System.DateTime((long)(value * TimeSpan.FromHours(1).Ticks)).ToString("t");

        DataContext = this;
    }
}

XAML

<Grid>
    <lvc:CartesianChart Series="{Binding Series}">
        <lvc:CartesianChart.AxisX>
            <lvc:Axis LabelFormatter="{Binding Formatter}"></lvc:Axis>
        </lvc:CartesianChart.AxisX>
    </lvc:CartesianChart>
</Grid>

Producing the graph below

回答1:

To keep it simple, I would use negative negative values, and then format the labels:

<lvc:CartesianChart>
        <lvc:CartesianChart.Series>
            <lvc:LineSeries Values="{Binding Values}"></lvc:LineSeries>
        </lvc:CartesianChart.Series>
        <lvc:CartesianChart.AxisY>
            <lvc:Axis MinValue="-10" MaxValue="-1" LabelFormatter="{Binding Formatter}">
                <lvc:Axis.Separator>
                    <!--to force the display of all the labels all the time
                    lets force the step-->
                    <lvc:Separator Step="1"></lvc:Separator>
                </lvc:Axis.Separator>
            </lvc:Axis>
        </lvc:CartesianChart.AxisY>
    </lvc:CartesianChart>

Code Behind:

Values = new ChartValues<double>
        {
            -1,
            -2,
            -3,
            -4,
            -5,
            -6,
            -7,
            -8,
            -9
        };

Formatter = x => x*-1 + " place";

Edit

The previous option is an specific solution for this question, to invert an axis you need to:

 var invertedYMapper = LiveCharts.Configurations.Mappers.Xy<ObservablePoint>()
            .X(point => point.X)
            .Y(point => -point.Y);

        var lineSeries = new LineSeries
        {
            Values = new ChartValues<ObservablePoint>
                {
                    new ObservablePoint(0,2),
                    new ObservablePoint(1,5),
                    new ObservablePoint(2,7)
                }
        };

        // set the inverted mapping...
        lineSeries.Configuration = invertedYMapper;

        var seriesCollection = new SeriesCollection
        {
            lineSeries
        };

        // correct the labels
        var YAxis = new Axis
        {
            LabelFormatter = x => (x * -1).ToString()
        };
        cartesianChart1.AxisY.Add(YAxis);

        cartesianChart1.Series = seriesCollection;