2014-09-26 86 views
1

首先感谢您阅读本文。工具包图表旋转标签X轴

我有以下问题:
我希望我的X轴标签可以旋转90度。以便文本面向垂直而不是水平。我的X轴是自动生成的,但不一定是。 因此,标签的内容是垂直的而不是水平的。我已经尝试了多个选项来实现这一点,但他们都没有为我工作。所以我真的很希望有人知道如何让这个工作。有了我试过的选项,只有另一个只显示数字的轴。虽然我想要的东西是标签被转动,以便所有的文字都可以放在轴上而不会互相重叠。

下面的图片就是这样,它是现在: How it is right now.

这里是如何我想它是(这是Excel做)的一个例子: The way i would like it to be.

我有看着周围更多的网站,但我无法找到一个为我工作。
无论是在xaml或在后面的代码都适合我。
这是我现在使用的代码:

<toolkit:Chart Margin="8,72,0,8" Title="Aantal meldingen per afdeling" x:Name="chartMeldingenPerAfdeling"> 
     <toolkit:Chart.Background> 
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
       <GradientStop Color="White" Offset="0"/> 
       <GradientStop Color="#FF476D88" Offset="1"/> 
      </LinearGradientBrush> 
     </toolkit:Chart.Background> 
     <toolkit:ColumnSeries ItemsSource="{Binding}" DependentValuePath="AantalMeldingen" 
           IndependentValuePath="Afdeling" Margin="0,0,0,1" 
          Title="Aantal meldingen" Padding="0" VerticalContentAlignment="Center" 
          HorizontalContentAlignment="Center" FontSize="8"/> 
     <toolkit:LineSeries ItemsSource="{Binding}" DependentValueBinding="{Binding Percentage}" DependentRangeAxis="{Binding ElementName=PercentageAxis}" 
          IndependentValueBinding="{Binding Afdeling}" IndependentAxis="{Binding ElementName=lin}" Title="Pareto"/> 
     <toolkit:Chart.Axes> 
      <toolkit:LinearAxis Orientation="Y" Location="Left" Title="Aantal" x:Name="AantalAxis"/> 
      <toolkit:LinearAxis Orientation="Y" Location="Right" Title="Percentage" x:Name="PercentageAxis" Minimum="0" Maximum="100"/> 
     </toolkit:Chart.Axes> 
    </toolkit:Chart> 

预先感谢您。

+0

不知道问题是什么。我可以看到你有两个轴,都是Y轴。那么你的x轴在哪里? – Martin 2014-09-26 11:49:34

+0

你好马丁,谢谢你的回应。我的X轴是自动生成的。 – Dave 2014-09-26 11:51:15

回答

4

请验证码:

<toolkit:Chart Title="{Binding ChartTitle}" x:Name="myChart" Style="{StaticResource myChartStyle}" BorderBrush="{x:Null}" Background="Black" Foreground="White"> 
      <toolkit:ColumnSeries ItemsSource="{Binding LegendList}" 
       DependentValueBinding="{Binding FeatureQuantity}" 
       IndependentValueBinding="{Binding LegendName}" DataPointStyle="{Binding Source={StaticResource ColorByGradeColumn}}" > 

      </toolkit:ColumnSeries> 

      <toolkit:Chart.Axes> 
       <toolkit:CategoryAxis Orientation="X" 
             Location="Bottom" 
             Foreground="White"> 
        <toolkit:CategoryAxis.AxisLabelStyle> 
         <Style TargetType="toolkit:AxisLabel"> 
          <Setter Property="Template"> 
           <Setter.Value> 
            <ControlTemplate 
              TargetType="toolkit:AxisLabel"> 
             <TextBlock 
           Text="{TemplateBinding FormattedContent}" 
                TextAlignment="Right" 
                TextWrapping="Wrap" 
                Width="60" 
                Margin="-20,15,0,0" 
                RenderTransformOrigin="0.5,0.5"> 
              <TextBlock.RenderTransform> 
               <RotateTransform Angle="90" /> 
              </TextBlock.RenderTransform> 
             </TextBlock> 
            </ControlTemplate> 
           </Setter.Value> 
          </Setter> 
         </Style> 
        </toolkit:CategoryAxis.AxisLabelStyle> 
       </toolkit:CategoryAxis> 
      </toolkit:Chart.Axes> 

     </toolkit:Chart> 

和结果是: http://upload7.ir/imgs/2014-10/42094080161295718077.png

+0

非常感谢!感谢你的代码,我得到了它的工作。但是,我可以让文本保持在一行吗? – Dave 2014-10-13 06:58:12

+0

是的,增加图表或父图表的高度。并且可以从TextBlock中删除TextWrapping属性。编辑边距属性以更改TextBlock的位置。 – MTSS 2014-10-13 10:43:06

1

你可以试试这个你toolkit:ColumnSeries XAML元素:

 <chartingToolkit:ColumnSeries ItemsSource="{Binding}" DependentValuePath="AantalMeldingen" IndependentValuePath="Afdeling" Margin="0,0,0,1" Title="Aantal meldingen" Padding="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="8"> 
      <chartingToolkit:ColumnSeries.IndependentAxis> 
       <chartingToolkit:CategoryAxis Orientation="X"> 
        <chartingToolkit:CategoryAxis.AxisLabelStyle> 
         <Style TargetType="chartingToolkit:AxisLabel"> 
          <Setter Property="Template"> 
           <Setter.Value> 
            <ControlTemplate TargetType="chartingToolkit:AxisLabel"> 
             <TextBlock Text="{TemplateBinding FormattedContent}"> 
               <TextBlock.LayoutTransform> 
                <RotateTransform Angle="-90"/> 
               </TextBlock.LayoutTransform> 
             </TextBlock> 
            </ControlTemplate> 
           </Setter.Value> 
          </Setter> 
         </Style> 
        </chartingToolkit:CategoryAxis.AxisLabelStyle> 
       </chartingToolkit:CategoryAxis> 
      </chartingToolkit:ColumnSeries.IndependentAxis> 
     </chartingToolkit:ColumnSeries>