图表-在数据展示中一直占有重要的位置。通过图表我们可以非常容易的读取数据和清晰了解到数据之间的关系。图例-Legend是图表中非常重要的一部分。它被用于提供图表中展示数据系列的信息。图表中的图例拥有 Header,通常包含描述数据系列的文字。

 

C1Chart for Silverlight 同样提供给用户以上图例特性。在向图表添加数据时,图例会自动生成。但是,它的显示受到Legend 对象的高度所制约。如果高度无法容纳所有图例,那么图例将展示不全。

本文章中将使用一个实例工程展示如何实现在图例中添加滚动条,从而可以展示所有图表。

XAML 代码如下:

<c1:C1Chart x:Name="chart" ChartType="Line">
   <c1:C1Chart.View>
      <c1:ChartView>
         <c1:ChartView.AxisX>
           <c1:Axis Title="Year" MajorGridStroke="Transparent"/>
           </c1:ChartView.AxisX>
          <c1:ChartView.AxisY>
          <c1:Axis Title="Quarterly Sales (in $1,000)" MajorGridStroke="#40000000" AnnoFormat="n0" />
          </c1:ChartView.AxisY>
            </c1:ChartView>
          </c1:C1Chart.View>
 
          <c1:C1Chart.Data>
            <c1:ChartData ItemNames="P1 P2 P3 P4 P5">
              <c1:DataSeries Label="s1" Values="20, 22, 19, 24, 25" ConnectionStrokeThickness="1" ChartType="Bar"/>
             <c1:DataSeries Label="s2" Values="8, 12, 10, 12, 15" />
             <c1:DataSeries Label="s3" Values="20, 22, 19, 24, 25" ConnectionStrokeThickness="2" />
             <c1:DataSeries Label="s4" Values="8, 12, 10, 12, 15" />
             <c1:DataSeries Label="s5" Values="20, 22, 19, 24, 25" ConnectionStrokeThickness="3" ChartType="Bar"/>
             <c1:DataSeries Label="s6" Values="8, 12, 10, 12, 15" />
             <c1:DataSeries Label="s7" Values="20, 22, 19, 24, 25" ConnectionStrokeThickness="4" />
             <c1:DataSeries Label="s8" Values="8, 12, 10, 12, 15" />
             <c1:DataSeries Label="s9" Values="20, 22, 19, 24, 25" ConnectionStrokeThickness="5" />
                    <c1:DataSeries Label="s10" Values="8, 12, 10, 12, 15" />
                    <c1:DataSeries Label="s11" Values="20, 22, 19, 24, 25" ConnectionStrokeThickness="6" ChartType="Bar"/>
                    <c1:DataSeries Label="s12" Values="8, 12, 10, 12, 15" />
                    <c1:DataSeries Label="s13" Values="20, 22, 19, 24, 25" ConnectionStrokeThickness="7" />
                    <c1:DataSeries Label="s14" Values="8, 12, 10, 12, 15" />
                    <c1:DataSeries Label="s15" Values="20, 22, 19, 24, 25" ConnectionStrokeThickness="8" />
                    <c1:DataSeries Label="s16" Values="8, 12, 10, 12, 15" ChartType="Bar"/>
                </c1:ChartData>
 
            </c1:C1Chart.Data>
 
             <c1:C1ChartLegend Height="100">
                <c1:C1ChartLegend.Template>
                    <ControlTemplate TargetType="c1:C1ChartLegend">
                        <Border Name="bdr"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalAlignment}"
                            Padding="{TemplateBinding Padding}"
                            CornerRadius="{TemplateBinding CornerRadius}">
                            <Grid>
                                <ContentControl Foreground="{TemplateBinding Foreground}" x:Name="title" HorizontalContentAlignment="Center" Content="{TemplateBinding Title}" />
                                <ScrollViewer x:Name="sv" BorderThickness="0" VerticalScrollBarVisibility="Auto">
                                    <ItemsPresenter />
                                </ScrollViewer>
                            </Grid>
                        </Border>
                    </ControlTemplate>
 
                </c1:C1ChartLegend.Template>
            </c1:C1ChartLegend>
        </c1:C1Chart>
 

Download Sample