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

时间:2017-04-25 22:18:35

标签: c# wpf xaml charts wpftoolkit

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

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

我正在尝试将这些标签旋转45度,但它实际上为此样式添加了一组额外的标签,范围从0到1.0,并在图表顶部移动我想要的标签(添加分隔符以保存图像宽度):

enter image description here

后面的代码生成图表数据:

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 }
};

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

1 个答案:

答案 0 :(得分:2)

您可能希望使用CategoryAxis代替。另外,增加Height以正确容纳标签,如下所示:

<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>

enter image description here