删除Silverlight图表X轴标签中的交错

Question

我创建了一个Silverlight柱状图，并按照this MSDN Blog的指导旋转了X轴。标签被正确地旋转，但我最终在X轴上得到了交错的标签，这不太适合。我想去掉标签上的错位。

下面是XAML：

<toolkit:Chart Name="theColumnChart" BorderThickness="0" Margin="5"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource Chart}"
Template="{StaticResource ChartTemplate}" TitleStyle="{StaticResource ChartTitleStyle}">
<toolkit:Chart.Palette>
  <visualizationToolkit:ResourceDictionaryCollection>
    <ResourceDictionary>
      <Style x:Key="DataPointStyle" TargetType="toolkit:ColumnDataPoint" BasedOn="{StaticResource ColumnDataPointStyle}">
        <Setter Property="Background" Value="Goldenrod"/>
      </Style>
    </ResourceDictionary>
    <ResourceDictionary>
      <Style x:Key="DataPointStyle" TargetType="toolkit:ColumnDataPoint" BasedOn="{StaticResource ColumnDataPointStyle}">
        <Setter Property="Background" Value="SaddleBrown"/>
      </Style>
    </ResourceDictionary>
  </visualizationToolkit:ResourceDictionaryCollection>
</toolkit:Chart.Palette>
<toolkit:Chart.Axes>
  <toolkit:LinearAxis Minimum="0" Orientation="Y" />
</toolkit:Chart.Axes>
<toolkit:Chart.Series>
  <toolkit:ColumnSeries DependentValueBinding="{Binding ItemValue}" IndependentValueBinding="{Binding ItemKey}"
    ItemsSource="{Binding Statistics1}" Title="{Binding SeriesTitle}">
    <toolkit:ColumnSeries.IndependentAxis>
      <toolkit:CategoryAxis Orientation="X">
        <toolkit:CategoryAxis.AxisLabelStyle>
          <Style TargetType="toolkit:AxisLabel">
            <Setter Property="Template">
              <Setter.Value>
                <ControlTemplate TargetType="toolkit:AxisLabel">
                  <layout:LayoutTransformer>
                    <layout:LayoutTransformer.LayoutTransform>
                      <RotateTransform Angle="-45"/>
                    </layout:LayoutTransformer.LayoutTransform>
                    <TextBlock Text="{TemplateBinding FormattedContent}"/>
                  </layout:LayoutTransformer>
                </ControlTemplate>
              </Setter.Value>
            </Setter>
          </Style>
        </toolkit:CategoryAxis.AxisLabelStyle>
      </toolkit:CategoryAxis>
    </toolkit:ColumnSeries.IndependentAxis>
  </toolkit:ColumnSeries>
</toolkit:Chart.Series>
</toolkit:Chart>

以下是问题的一张图片：

​

Answer 1

瑞秋·马丁

上面的标签仍然足够宽，没有足够的空间将它们放在一起。您可以选择更多地旋转文本(这将缩小每个标签)或使图表变宽(这将为标签提供更多空间)。如果您不喜欢这两个选项中的任何一个，也可以删除交错行为，但必须修改数据可视化代码才能做到这一点；我在这里解释如何做到这一点：http://blogs.msdn.com/b/delay/archive/2010/03/06/turn-your-head-and-check-out-this-post-how-to-easily-rotate-the-axis-labels-of-a-silverlight-wpf-toolkit-chart.aspx#10083036

希望这能有所帮助！

Answer 2

当标签旋转90°时，即使它们之间有足够的视觉空间，也会发生交错，不确定原因。所以我最终得到了垂直交错的标签，它们之间有很大的空间！

我今天遇到了这个问题，我发现了一个略显老套的解决方案，它不需要修改控件本身，而只涉及一个自定义的控件模板。

下面的代码垂直显示日期标签，并删除交错。

每个标签都被包装到一个画布中，正如here所解释的那样，画布不会裁剪其内容。我不得不修改标签的边距，使其与轴标记对齐。

<toolkit:DateTimeAxis.AxisLabelStyle>
            <Style TargetType="toolkit:DateTimeAxisLabel">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="toolkit:DateTimeAxisLabel">
                            <Canvas Height="55">
                                <sdk:Label Content="{Binding StringFormat=\{0:dd/MM/yyyy\}}" Margin="-30,30,0,0" >
                                    <sdk:Label.RenderTransform>
                                        <RotateTransform Angle="-90" />
                                    </sdk:Label.RenderTransform>
                                    <sdk:Label.RenderTransformOrigin>
                                        <Point>0.5, 0.5</Point>
                                    </sdk:Label.RenderTransformOrigin>
                                </sdk:Label>
                            </Canvas>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </toolkit:DateTimeAxis.AxisLabelStyle>

结果如下：

​

​