【发布时间】：2026-02-01 03:10:01
【问题描述】：
我正在尝试使用实时图表构建财务图表，但我想要两个图表共享 x 轴或同步 x 轴。我目前正在尝试使用同步 x 轴的两个图表，但由于主图表的轴标签宽度而遇到麻烦，请参见下图。
我试图从辅助图表中减去轴标签宽度，但该属性始终为 0 :(
private void Grid_LayoutUpdated(object sender, EventArgs e)
{
var axisWidth = MainChart.AxisY[1].ActualWidth; //always 0 :(
IndicatorChart.Width -= axisWidth;
}
这是 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>
系列集合：
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);
}
【问题讨论】：
-
你能贴出SeriesCollection和IndicatorSeriesCollection的代码吗？
-
当然，现在发布
-
您的 GCandleSeries 是具有高/低和开/关值的双系列，因此您在顶部图表中有两个 Y 轴，而 GLineSeries 在底部图表中是单个系列
-
是的，我知道，这就是我想要的，我的问题是是否可以将顶部图表主窗口与底部图表主窗口对齐。例如，通过从底部图表宽度中减去顶部图表右侧 Y 轴宽度来计算底部图表宽度。抱歉，如果我的问题不清楚，我对 wcf 没有那么丰富的经验。
标签： c# wpf livecharts