滚动X轴绘图区域 - Silverlight柱系列

[英]Scrolling X axis Plot area - Silverlight Column Series


I have a Column series chart which is working fine.

我有一个柱系列图表,工作正常。

I have a feature that i need to add to that, i want the horizontall scroll to be enabled to the plot area that is x-axis.

我有一个功能,我需要添加到那,我希望horizo​​ntall滚动启用到绘图区域是x轴。

Here is the screen shot:

这是屏幕截图:

enter image description here

If you see the screen shot i have six items, and the bar are very thin because of more number of items, so suppose if i have 20 items then the bars will not be visible at all.

如果你看到屏幕截图我有六个项目,并且由于更多的项目,条形图非常薄,所以假设我有20个项目,那么条形图将根本不可见。

So can we make the X-axis bar scrollable horizontally ?

那么我们可以使X轴条水平滚动吗?

EDIT

编辑

ResourceDictionary.xaml

ResourceDictionary.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:convertor="clr-namespace:ChartingDV.Provider"
    xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    xmlns:chartingprimitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit">

    <ControlTemplate x:Key="PhoneChartPortraitTemplate" TargetType="charting:Chart">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <datavis:Title
                Content="{TemplateBinding Title}"
                Style="{TemplateBinding TitleStyle}"/>
            <datavis:Legend x:Name="Legend"
                Grid.Row="2"
                Header="{TemplateBinding LegendTitle}"
                Style="{TemplateBinding LegendStyle}">
                <datavis:Legend.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </datavis:Legend.ItemsPanel>
                <datavis:Legend.Template>
                    <ControlTemplate TargetType="datavis:Legend">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <ScrollViewer
                                    Grid.Row="1"
                                    HorizontalScrollBarVisibility="Auto"
                                    VerticalScrollBarVisibility="Disabled"
                                    BorderThickness="0"
                                    Padding="0"
                                    IsTabStop="False">
                                <ItemsPresenter
                                        x:Name="Items"
                                        Margin="10,0,10,10"/>
                            </ScrollViewer>
                        </Grid>
                    </ControlTemplate>
                </datavis:Legend.Template>
            </datavis:Legend>
            <chartingprimitives:EdgePanel
                Grid.Column="0"
                Grid.Row="1"
                x:Name="ChartArea"
                Style="{TemplateBinding ChartAreaStyle}">
                <Grid
                    Canvas.ZIndex="-1"
                    Style="{TemplateBinding PlotAreaStyle}" />
            </chartingprimitives:EdgePanel>
        </Grid>
    </ControlTemplate>

    <!-- Chart Style for Phone -->
    <Style x:Key="PhoneChartStyle" TargetType="charting:Chart">
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Padding" Value="10" />
        <Setter Property="Palette">
            <Setter.Value>
                <datavis:ResourceDictionaryCollection>
                    <!-- Blue -->
                    <ResourceDictionary>
                        <SolidColorBrush x:Key="Background" Color="#E85F3D"/>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}" />
                        </Style>
                        <Style x:Key="DataShapeStyle" TargetType="Shape">
                            <Setter Property="Stroke" Value="{StaticResource Background}" />
                            <Setter Property="StrokeThickness" Value="2" />
                            <Setter Property="StrokeMiterLimit" Value="1" />
                            <Setter Property="Fill" Value="{StaticResource Background}" />
                        </Style>
                    </ResourceDictionary>
                    <!-- Red -->
                    <ResourceDictionary>
                        <SolidColorBrush x:Key="Background" Color="#76D164"/>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}" />
                        </Style>
                        <Style x:Key="DataShapeStyle" TargetType="Shape">
                            <Setter Property="Stroke" Value="{StaticResource Background}" />
                            <Setter Property="StrokeThickness" Value="2" />
                            <Setter Property="StrokeMiterLimit" Value="1" />
                            <Setter Property="Fill" Value="{StaticResource Background}" />
                        </Style>
                    </ResourceDictionary>
                    <!-- Light Green -->
                    <ResourceDictionary>
                        <SolidColorBrush x:Key="Background" Color="#648ED1"/>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}" />
                        </Style>
                        <Style x:Key="DataShapeStyle" TargetType="Shape">
                            <Setter Property="Stroke" Value="{StaticResource Background}" />
                            <Setter Property="StrokeThickness" Value="2" />
                            <Setter Property="StrokeMiterLimit" Value="1" />
                            <Setter Property="Fill" Value="{StaticResource Background}" />
                        </Style>
                    </ResourceDictionary>
                </datavis:ResourceDictionaryCollection>
            </Setter.Value>
        </Setter>
        <Setter Property="LegendStyle">
            <Setter.Value>
                <Style TargetType="datavis:Legend">
                    <Setter Property="HorizontalAlignment" Value="Center"/>
                    <Setter Property="VerticalAlignment" Value="Center"/>
                    <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
                    <Setter Property="Margin" Value="20"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="ChartAreaStyle">
            <Setter.Value>
                <Style TargetType="Panel">
                    <Setter Property="MinWidth" Value="100" />
                    <Setter Property="MinHeight" Value="75" />
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="PlotAreaStyle">
            <Setter.Value>
                <Style TargetType="Grid">
                    <Setter Property="Background" Value="Transparent"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Template" Value="{StaticResource PhoneChartPortraitTemplate}"/>
    </Style>

</ResourceDictionary>

In the XAMl file:

在XAMl文件中:

<charting:Chart Name="barChart"
    Style="{StaticResource PhoneChartStyle}"
    Template="{StaticResource PhoneChartPortraitTemplate}">
    <charting:Chart.Series>
        <charting:ColumnSeries 
            Title="Incorrect"
            IndependentValueBinding="{Binding Key}"
            DependentValueBinding="{Binding Value}"
            AnimationSequence="Simultaneous">
        </charting:ColumnSeries>
        <charting:ColumnSeries                 
            Title="Correct"
            IndependentValueBinding="{Binding Key}"
            DependentValueBinding="{Binding Value}"
            AnimationSequence="Simultaneous">
        </charting:ColumnSeries>
        <charting:ColumnSeries                 
            Title="Skipped"
            IndependentValueBinding="{Binding Key}"
            DependentValueBinding="{Binding Value}"
            AnimationSequence="Simultaneous">
        </charting:ColumnSeries>
    </charting:Chart.Series>
</charting:Chart>

1 个解决方案

#1


0  

Finally i have solved it, but i have not made any changes to the APIs,instead i have followed the below approach.

最后我已经解决了,但我没有对API进行任何更改,而是我遵循了以下方法。

1) We have an option to scroll the entire chart.

1)我们可以选择滚动整个图表。

2) Make the entire bar chart to scroll and then remove the Y axis values.

2)使整个条形图滚动,然后删除Y轴值。

3) Now create a Dummy layout with Y axis values using Grid row definitions.This will your root Grid.

3)现在使用网格行定义创建一个带有Y轴值的虚拟布局。这将是您的根网格。

4) Now inside the root grid place you chart grid.

4)现在在根网格内部放置图表网格。

5) Now when you take n no of tests you can scroll the chart, but your dummy layout with Y axis values remains constant as it is, so for the user it looks like the bars are scrolling.

5)现在当您进行n次测试时,您可以滚动图表,但是具有Y轴值的虚拟布局保持不变,因此对于用户来说,看起来条形图是滚动的。

Enjoy :)

请享用 :)


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.itdaan.com/blog/2014/03/12/8f0d725eb978fe73fe3f894acb540ee4.html



 
© 2014-2018 ITdaan.com 粤ICP备14056181号