滚动X轴绘图区——Silverlight Column系列
Posted
技术标签:
【中文标题】滚动X轴绘图区——Silverlight Column系列【英文标题】：Scrolling X axis Plot area - Silverlight Column Series 【发布时间】：2014-04-16 07:59:39 【问题描述】：我有一个工作正常的列系列图表。
我有一个需要添加的功能，我希望将水平滚动启用到 x 轴的绘图区域。
这是屏幕截图：
如果您看到屏幕截图，我有 6 个项目，并且由于项目数量较多，条形非常细，所以假设如果我有 20 个项目，则条形将根本不可见。
那么我们可以让 X 轴条水平滚动吗？
编辑
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>
在 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>
【问题讨论】：
您可以尝试编辑模板并在其中添加ScrollViewer 控件，但在这种情况下，Y 轴也会滚动和隐藏。但我不知道更好的方法。
@vorrtex 我要在这里添加我的样式吗？你能帮我编辑一下吗？
是的，发布图表控件模板。
@vorrtex 请看我的编辑
@vorrtex 你看到我的编辑了吗？你能帮帮我吗？
【参考方案1】：
我终于解决了，但我没有对 API 做任何更改，而是按照下面的方法。
1) 我们可以选择滚动整个图表。
2) 使整个条形图滚动，然后删除Y axis 值。
3) 现在使用Grid row definitions 创建一个带有Y axis values 的虚拟布局。这将是您的根Grid。
4) 现在在根网格内放置图表网格。
5) 现在，当您进行 n 没有测试时，您可以滚动图表，但您的带有 Y axis 值的虚拟布局保持不变，因此对于用户来说，条形看起来像是在滚动。
享受:)
【讨论】：
以上是关于滚动X轴绘图区——Silverlight Column系列的主要内容，如果未能解决你的问题，请参考以下文章