Question

我正在尝试使用实时图表构建金融图表，但我希望有两个共享x轴或x轴同步的图表。我目前正试图让两个图表具有同步的x轴但由于主图表的轴标签宽度而出现问题，请参见下图。

我尝试从辅助图表中减去轴标签宽度，但该属性始终为0 :(

private void Grid_LayoutUpdated(object sender, EventArgs e)
{
   var axisWidth = MainChart.AxisY[1].ActualWidth; //always 0 :(
   IndicatorChart.Width -= axisWidth;
}

任何人都知道如何使用livecharts解决这个问题？提前致谢！

这是XAML：

<UserControl x:Class="TradeChart.GearedExample"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:TradeChart"
         xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
        xmlns:geared="clr-namespace:LiveCharts.Geared;assembly=LiveCharts.Geared"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
    <Grid LayoutUpdated="Grid_LayoutUpdated" Loaded="Grid_Loaded">
        <Grid.RowDefinitions>
            <RowDefinition Height="4*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <lvc:CartesianChart Zoom="X" Pan="X" DisableAnimations="True" AnimationsSpeed="0:0:0.15" Series="{Binding SeriesCollection}" MouseMove="UIElement_OnMouseMove"  LayoutUpdated="MainChart_LayoutUpdated" x:Name="MainChart" DataTooltip="{x:Null}">
            <lvc:CartesianChart.AxisX>
                <lvc:Axis Labels="{Binding Labels}" IsMerged="True">
                    <lvc:Axis.Sections>
                        <lvc:AxisSection Value="{Binding XPointer}"
                                     SectionWidth="1"
                                     SectionOffset="-0.5"
                                     Fill="#59FF5722"
                                     Stroke="#ff5722"
                                     StrokeThickness=".5"
                                     DataLabelForeground="White"
                                     DataLabel="True"/>
                    </lvc:Axis.Sections>
                </lvc:Axis>
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.AxisY>
                <lvc:Axis LabelFormatter="{Binding Formatter}">
                    <lvc:Axis.Sections>
                        <lvc:AxisSection Value="{Binding YPointer}" 
                                     DataLabel="True"
                                     StrokeThickness="1"
                                     Stroke="#ff5722"
                                     DisableAnimations="True"
                                     DataLabelForeground="White"
                                     Panel.ZIndex="1"/>
                    </lvc:Axis.Sections>
                </lvc:Axis>
                <lvc:Axis Position="RightTop" x:Name="VolumeAxis" LayoutUpdated="Axis_LayoutUpdated" Width="400">
                </lvc:Axis>
            </lvc:CartesianChart.AxisY>
        </lvc:CartesianChart>
        <lvc:CartesianChart Grid.Row="1" Zoom="X" Pan="X" DisableAnimations="True" AnimationsSpeed="0:0:0.15" Series="{Binding IndicatorSeriesCollection}" MouseMove="UIElement_OnMouseMove" x:Name="IndicatorChart" DataTooltip="{x:Null}">
            <lvc:CartesianChart.AxisX>
                <lvc:Axis Labels="{Binding Labels}" IsMerged="True">
                    <lvc:Axis.Sections>
                        <lvc:AxisSection Value="{Binding XPointer}"
                                     SectionWidth="1"
                                     SectionOffset="-0.5"
                                     Fill="#59FF5722"
                                     Stroke="#ff5722"
                                     StrokeThickness=".5"
                                     DataLabelForeground="White"
                                     DataLabel="True"/>
                    </lvc:Axis.Sections>
                </lvc:Axis>
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.AxisY>
                <lvc:Axis LabelFormatter="{Binding Formatter}" MinValue="0" MaxValue="100">
                    <lvc:Axis.Sections>
                        <lvc:AxisSection Value="{Binding YPointer}" 
                                     DataLabel="True"
                                     StrokeThickness="1"
                                     Stroke="#ff5722"
                                     DisableAnimations="True"
                                     DataLabelForeground="White"
                                     Panel.ZIndex="1"/>
                    </lvc:Axis.Sections>
                </lvc:Axis>
            </lvc:CartesianChart.AxisY>
        </lvc:CartesianChart>
    </Grid>
</UserControl>

SeriesCollection：

    private void CreateCandleSeries(IReadOnlyList<Candle> candles)
    {
        var values = new List<OhlcPoint>();
        foreach (var candle in candles)
        {
            values.Add(new OhlcPoint
            {
                Open = (double)candle.Open,
                Close = (double)candle.Close,
                High = (double)candle.High,
                Low = (double)candle.Low
            });
        }
        var gearValues = new GearedValues<OhlcPoint>();
        gearValues.AddRange(values);
        gearValues.WithQuality(Quality.Low);
        var candleSeries = new GCandleSeries()
        {
            Values = gearValues,
            ScalesYAt = 0,

        };

        var increaseBrush = candleSeries.IncreaseBrush;
        var decreaseBrush = candleSeries.DecreaseBrush;
        candleSeries.IncreaseBrush = decreaseBrush;
        candleSeries.DecreaseBrush = increaseBrush;

        SeriesCollection.Add(candleSeries);
    }

IndicatorSeriesCollection：

    private void CreateSingleLineOscilatorSeries(IReadOnlyList<Candle> candles, int period, Func<int, int?, int?, IReadOnlyList<AnalyzableTick<decimal?>>> indicator, SeriesCollection collectionToAddTo, int? startIndex = null, int? endIndex = null)
    {
        var indicatorCandleValues = indicator.Invoke(period, startIndex, endIndex);
        var indicatorValues = new List<double>();
        foreach (var value in indicatorCandleValues)
        {
            if (value.Tick.HasValue)
            {
                indicatorValues.Add((double)value.Tick.Value);
            }
            else
            {
                indicatorValues.Add(-1);
            }
        }
        var indicatorMapper = new CartesianMapper<double>().X((value, index) => index).Y((value, index) => value);
        var gearValues = new GearedValues<double>();
        gearValues.AddRange(indicatorValues);
        gearValues.WithQuality(Quality.High);
        var smaSeries = new GLineSeries(indicatorMapper)
        {
            Fill = Brushes.Transparent,
            Values = gearValues,
            LineSmoothness = 0,

            ScalesYAt = 0
        };
        collectionToAddTo.Add(smaSeries);
    }

Answer 1

好吧，我放弃了尝试对齐两个图表，但是我设法通过将底部图表放入主图表并使用MinValue和MaxValue来使其坚持到底部来解决问题。

以下是我设置MinValue和MaxValue的方法：

candlechart MinValue=candles.Min() - 0.2*candles.Min()
candlechart MaxValue=candles.Max()

volume MinValue=volumes.Min()
volume MaxValues=volumes.Max() * 2

振荡器在0到100之间挂起，所以我将max和min值设置为：

oscilator MaxValue=600
oscilator MinValue=20

结果：

Answer 2

我有类似的问题，只能使用Axis的IsMerged属性来解决它：

...
<lvc:Axis IsMerged="True"/>

Answer 3

/usr/local/bin属性未连接到Width，默认情况下将使用Axis中最大的项来确定Axis的值，从而生成不同大小的图形

由于该项目看起来不太活跃，因此我为.net core 3.1创建了该项目的分支，并在那里进行了更改。

https://github.com/matsydoodles/Live-Charts/commit/12349fd4e329a4a6a42ff2fa4d3362d546161aa4

将两个具有不同轴标签宽度的cartisian图表对齐？

3 个答案: