滚动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 =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
=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 =HorizontalAlignmentValue =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轴$ c
享受:)
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屋!