C1Chart:创建可滚动的图例

发布时间:2012/12/04 00:12 发布者:iceman

返回博客中心

图表-在数据展示中一直占有重要的位置。通过图表我们可以非常容易的读取数据和清晰了解到数据之间的关系。图例-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


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网