c#如何使用实时图表反转Y轴 [英] c# How to invert Y Axis with Live Charts

问题描述

我正试图简单地反转Y轴，以便此图上升而不是下降.

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

从6开始一直上升到1.

Starting at 6 going up to 1.

这是倒排图的用户文档

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

用户文档指出每个直播系列都有一个倒置的类，对于LineSeries类，它只是一个VerticalLineSeries，我将DateTime示例更改为该类.但是，图形仍从1-6向上上升.我想念什么?

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>

产生下面的图

推荐答案

为简单起见，我将使用负的负值，然后设置标签的格式:

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>

后面的代码:

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;

这篇关于c#如何使用实时图表反转Y轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！