c# - 使用代码隐藏堆叠列系列在 WPF 图表上旋转独立轴标签

Question

我有一个 WPF 堆积柱形图，显示每个日期范围内每种类型的伤害数量。

每个独立(X 轴)值都是一个月或一年，因此我不能只使用直接的 DateTime 作为标签类型。

我试图将这些标签旋转 45 度，但它实际上为这种样式添加了一组额外的标签，从 0 到 1.0，并将我想要的标签移动到图表顶部(添加分隔线以节省图像宽度):

生成图表数据的代码:

var dataSeries = new StackedColumnSeries();
// injuryTypes is of type List<KeyValuePair<string, string>>.  KVP example: "Heat Burns", "HB" 
// injuries is of type List<List<KeyValuePair<string, decimal>>>.  KVP example: "2015 Avg. Mo.", 12

chtHoursLost.Series.Clear();

for (var i = 0; i < injuries.Count; i++)
{
    var columnColor = new Style();
    var injurySeriesDef = new SeriesDefinition()
    {
        ItemsSource = injuries[i],
        DependentValuePath = "Value",
        IndependentValuePath = "Key"
    };

    injurySeriesDef.Title = string.Format("{0} ({1})", ((KeyValuePair<string, string>)
        (injuryTypes[i])).Value, injuryTypes[i].Key);
    columnColor.Setters.Add(new Setter(BackgroundProperty, new SolidColorBrush(
        Utility.GetInjuryColor(((KeyValuePair<string, string>)(injuryTypes[i])).Key))));
    injurySeriesDef.DataPointStyle = columnColor;
    dataSeries.SeriesDefinitions.Add(injurySeriesDef);
}

chtHoursLost.Series.Add(dataSeries);

var tiltedAxisLabelStyle = ((Style)(this.FindResource("stlAngledDates")));
axsHoursLostX.AxisLabelStyle = tiltedAxisLabelStyle;

相关XAML:

xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
<Window.Resources>
    <Style x:Key="stlAngledDates" TargetType="{x:Type chartingToolkit:AxisLabel}">
        <!--<Setter Property="StringFormat" Value="{}{0:d-MMM}" />-->
        <Setter Property="RenderTransformOrigin" Value="1,0.5" />
        <Setter Property="RenderTransform">
            <Setter.Value>
                <RotateTransform Angle="-45" />
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
...
<chartingToolkit:Chart x:Name="chtHoursLost" Grid.Row="1" Grid.Column="0" Margin="10,0,10,10" Title="Hours Lost/Restricted By Injury" Height="auto" Width="auto">
    <chartingToolkit:StackedColumnSeries x:Name="scsHoursLost" />
    <chartingToolkit:Chart.Axes>
        <chartingToolkit:LinearAxis x:Name="axsHoursLostX" Orientation="X"/>
        <chartingToolkit:LinearAxis Orientation="Y"  Title="Hours Lost" Minimum="0" Interval="35" ShowGridLines="True" />
    </chartingToolkit:Chart.Axes>
</chartingToolkit:Chart>

我也尝试过类似的方法，虽然额外的标签集消失了，但正确的标签没有旋转。

var injurySeriesDef = new SeriesDefinition()
{
    ItemsSource = injuries[i],
    DependentValuePath = "Value",
    IndependentValuePath = "Key",
    RenderTransformOrigin = new Point(1, 0.5),
    RenderTransform = new RotateTransform() { Angle = -45 }
};

如何让日期范围标签旋转？谢谢...

Answer 1

您可能想改用CategoryAxis。另外，增加其高度以正确容纳标签，如下所示:

<chartingToolkit:Chart x:Name="chtHoursLost" Grid.Row="1" Grid.Column="0" Margin="10,0,10,10" Title="Hours Lost/Restricted By Injury" Height="auto" Width="auto">
    <chartingToolkit:StackedColumnSeries x:Name="scsHoursLost" />
    <chartingToolkit:Chart.Axes>
        <chartingToolkit:CategoryAxis x:Name="axsHoursLostX" Orientation="X" Height="50" />
        <chartingToolkit:LinearAxis Orientation="Y"  Title="Hours Lost" Minimum="0" Interval="35" ShowGridLines="True" />
    </chartingToolkit:Chart.Axes>
</chartingToolkit:Chart>