滚动X轴绘图区 - Silverlight柱系列 [英] Scrolling X axis Plot area - Silverlight Column Series

问题描述

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

我有一个功能，我需要添加到，我希望水平滚动启用

这是屏幕截图：

如果您看到屏幕快照，我有六个项目，和酒吧非常瘦，因为更多的项目，所以假设如果我有20项，那么这些酒吧将不会显示。

因此，我们可以

ResourceDictionary.xaml / p>

 < 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 =PhoneChartPortraitTemplateTargetType =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 =Horizo​​ntal/> 
< / ItemsPanelTemplate> 
< / datavis：Legend.ItemsPanel> 
< datavis：Legend.Template> 
< ControlTemplate TargetType =datavis：Legend> 
< Grid> 
< Grid.RowDefinitions> 
< RowDefinition Height =Auto/> 
< RowDefinition /> 
< /Grid.RowDefinitions> 
< ScrollViewer 
 Grid.Row =1
 Horizo​​ntalScrollBarVisibility =Auto
 VerticalScrollBarVisibility =Disabled
 BorderThickness =0
 =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> 
 
<！ - 手机图表样式 - > 
< Style x：Key =PhoneChartStyleTargetType =charting：Chart> 
< Setter Property =IsTabStopValue =False/> 
< Setter Property =PaddingValue =10/> 
< Setter Property =Palette> 
< Setter.Value> 
< datavis：ResourceDictionaryCollection> 
<！ -  Blue  - > 
< ResourceDictionary> 
< SolidColorBrush x：Key =BackgroundColor =＃E85F3D/> 
< Style x：Key =DataPointStyleTargetType =Control> 
< Setter Property =BackgroundValue ={StaticResource Background}/> 
< / Style> 
< Style x：Key =DataShapeStyleTargetType =Shape> 
< Setter Property =StrokeValue ={StaticResource Background}/> 
< Setter Property =StrokeThicknessValue =2/> 
< Setter Property =StrokeMiterLimitValue =1/> 
< Setter Property =FillValue ={StaticResource Background}/> 
< / Style> 
< / ResourceDictionary> 
<！ -  Red  - > 
< ResourceDictionary> 
< SolidColorBrush x：Key =BackgroundColor =＃76D164/> 
< Style x：Key =DataPointStyleTargetType =Control> 
< Setter Property =BackgroundValue ={StaticResource Background}/> 
< / Style> 
< Style x：Key =DataShapeStyleTargetType =Shape> 
< Setter Property =StrokeValue ={StaticResource Background}/> 
< Setter Property =StrokeThicknessValue =2/> 
< Setter Property =StrokeMiterLimitValue =1/> 
< Setter Property =FillValue ={StaticResource Background}/> 
< / Style> 
< / ResourceDictionary> 
<！ - 浅绿色 - > 
< ResourceDictionary> 
< SolidColorBrush x：Key =BackgroundColor =＃648ED1/> 
< Style x：Key =DataPointStyleTargetType =Control> 
< Setter Property =BackgroundValue ={StaticResource Background}/> 
< / Style> 
< Style x：Key =DataShapeStyleTargetType =Shape> 
< Setter Property =StrokeValue ={StaticResource Background}/> 
< Setter Property =StrokeThicknessValue =2/> 
< Setter Property =StrokeMiterLimitValue =1/> 
< Setter Property =FillValue ={StaticResource Background}/> 
< / Style> 
< / ResourceDictionary> 
< / datavis：ResourceDictionaryCollection> 
< /Setter.Value> 
< / Setter> 
< Setter Property =LegendStyle> 
< Setter.Value> 
< Style TargetType =datavis：Legend> 
< Setter Property =Horizo​​ntalAlignmentValue =Center/> 
< Setter Property =VerticalAlignmentValue =Center/> 
< Setter Property =BorderBrushValue ={StaticResource PhoneForegroundBrush}/> 
< Setter Property =MarginValue =20/> 
< / Style> 
< /Setter.Value> 
< / Setter> 
< Setter Property =ChartAreaStyle> 
< Setter.Value> 
< Style TargetType =Panel> 
< Setter Property =MinWidthValue =100/> 
< Setter Property =MinHeightValue =75/> 
< / Style> 
< /Setter.Value> 
< / Setter> 
< Setter Property =PlotAreaStyle> 
< Setter.Value> 
< Style TargetType =Grid> 
< Setter Property =BackgroundValue =Transparent/> 
< / Style> 
< /Setter.Value> 
< / Setter> 
< Setter Property =TemplateValue ={StaticResource PhoneChartPortraitTemplate}/> 
< / Style> 
 
< / ResourceDictionary> 
  

在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 = > 
< / charting：ColumnSeries> 
< charting：ColumnSeries 
 Title =Correct
 IndependentValueBinding ={Binding Key}
 DependentValueBinding ={Binding Value}
 AnimationSequence = > 
< / charting：ColumnSeries> 
< charting：ColumnSeries 
 Title =Skipped
 IndependentValueBinding ={Binding Key}
 DependentValueBinding ={Binding Value}
 AnimationSequence = > 
< / charting：ColumnSeries> 
< / charting：Chart.Series> 
< / charting：Chart> 
  

解决方案

最后我解决了，对API的任何更改，而我已采取以下方法。

1）我们有一个选项滚动整个图表。

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

3）现在使用网格行定义创建 Y轴值的Dummy布局。这将是您的根 Grid 。

4）现在在根网格内您可以绘制网格。

5）现在，当你使用 n 的测试时，你可以滚动图表，但你的虚拟布局与 Y轴



享受：）

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.

Here is the screen shot:

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.

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

EDIT

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:

<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>

解决方案

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

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

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

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

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

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.

Enjoy :)

这篇关于滚动X轴绘图区 - Silverlight柱系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！