2014-09-26 3 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

+0

Привет, Мартин, Спасибо, что ответили. Моя ось X автоматически сгенерирована. – Dave

ответ

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

+0

Да, увеличьте высоту графика или родителя диаграммы. и вы можете удалить атрибут TextWrapping из TextBlock. Изменить атрибут Margin для места изменения TextBlock. – MTSS

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> 
Смежные вопросы