Silverlight CategoryAxis X宽度使用scrollView水平拉伸

时间:2014-03-13 13:29:35

标签: c# wpf silverlight charts windows-phone

我有工作栏系列。

我有大约50多个多列系列要显示,当有更多数量的条形时,它会缩小条形宽度并调整到图表宽度。

所以我想仅向类别轴X添加一个滚动并水平滚动以固定条的宽度,如果X轴的更多数量应该水平拉伸。

这是屏幕截图:

enter image description here

在屏幕截图中,您可以看到第3个系列正在剪切,而不是滚动。

这就是我的尝试:

<charting:Chart Name="barChart"
                                Style="{StaticResource PhoneChartStyle}"
                                Template="{StaticResource BarChartTemplate}">
                    <charting:Chart.Axes>
                        <charting:LinearAxis ShowGridLines="True" Title="Scores" Orientation="Y" Minimum="0" Maximum="50" Interval="10"/>
                        <charting:CategoryAxis HorizontalContentAlignment="Stretch"
                                               HorizontalAlignment="Stretch"
                                               Title="Fruits" 
                                               Width="1000"
                                               Orientation="X" 
                                               ScrollViewer.HorizontalScrollBarVisibility="Visible">
                        </charting:CategoryAxis>
                    </charting:Chart.Axes>
                    <charting:Chart.Series>
                        <charting:ColumnSeries 
                                    Title="Apple"
                                    IndependentValueBinding="{Binding Key}"
                                    DependentValueBinding="{Binding Value}"
                                    AnimationSequence="Simultaneous">
                            </charting:ColumnSeries>
                            <charting:ColumnSeries                 
                                    Title="Oranges"
                                    IndependentValueBinding="{Binding Key}"
                                    DependentValueBinding="{Binding Value}"
                                    AnimationSequence="Simultaneous">
                            </charting:ColumnSeries>
                            <charting:ColumnSeries                 
                                    Title="Guava"
                                    IndependentValueBinding="{Binding Key}"
                                    DependentValueBinding="{Binding Value}"
                                    AnimationSequence="Simultaneous">
                            </charting:ColumnSeries>
                    </charting:Chart.Series>
                </charting:Chart>*

1 个答案:

答案 0 :(得分:0)

我有同样的问题,这个技巧解决了这个问题。愿这也有助于你。

<ScrollViewer Width="480" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" Margin="0,10">
<charting:Chart Name="barChart"
                                Style="{StaticResource PhoneChartStyle}"
                                Template="{StaticResource BarChartTemplate}" Width="460">
                    <charting:Chart.Axes>
                        <charting:LinearAxis ShowGridLines="True" Title="Scores" Orientation="Y" Minimum="0" Maximum="50" Interval="10"/>
                        <charting:CategoryAxis HorizontalContentAlignment="Stretch"
                                               HorizontalAlignment="Stretch"
                                               Title="Fruits" 
                                               Width="1000"
                                               Orientation="X" 
                                               ScrollViewer.HorizontalScrollBarVisibility="Visible">
                        </charting:CategoryAxis>
                    </charting:Chart.Axes>
                    <charting:Chart.Series>
                        <charting:ColumnSeries 
                                    Title="Apple"
                                    IndependentValueBinding="{Binding Key}"
                                    DependentValueBinding="{Binding Value}"
                                    AnimationSequence="Simultaneous">
                            </charting:ColumnSeries>
                            <charting:ColumnSeries                 
                                    Title="Oranges"
                                    IndependentValueBinding="{Binding Key}"
                                    DependentValueBinding="{Binding Value}"
                                    AnimationSequence="Simultaneous">
                            </charting:ColumnSeries>
                            <charting:ColumnSeries                 
                                    Title="Guava"
                                    IndependentValueBinding="{Binding Key}"
                                    DependentValueBinding="{Binding Value}"
                                    AnimationSequence="Simultaneous">
                            </charting:ColumnSeries>
                    </charting:Chart.Series>
                </charting:Chart>
</ScrollViewer>

//代码后面设置barChart的ItemSource //我假设你的itemSource应该是List collection = new List(); //barChart.ItemSource = collection;

if (collection .Count() > 2)
{
   barChart.Width = barChart.Width + (collection .Count() * 80);
}