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>

以下是问题的图片： Staggered and Rotated Columns

Answer 1

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

我今天遇到了这个问题，我找到了一个稍微讨厌的解决方案，它不需要修改控件本身，但只涉及自定义控件模板。

以下代码垂直显示日期标签，并删除错开。

每个标签都被包装到Canvas中，正如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>

结果如下：

chart with stagger removed

Answer 2

Rachel Martin，

上面的标签仍然足够宽，以至于没有足够的空间让它们彼此相邻。您可以选择更多地旋转文本（这将缩小每个标签）或使图表更宽（这将为标签提供更多空间）。如果你不喜欢这些选项中的任何一个，你也可以删除交错行为，但是有必要修改数据可视化代码来执行此操作;我在这里解释一下：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

希望这有帮助！

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

2 个答案: