使用WebUI的新图表控件UXChart创建下钻图表

原创|使用教程|编辑:郝浩|2013-05-15 14:47:05.000|阅读 70 次

概述:UXChart虽然是WebUI Studio的图表控件,下面慧都就以一个最终用户经常提到的需求——下钻功能为例,来讲讲UXChart强大的实用性。

  UXChart虽然是WebUI Studio今年才推出的图表控件,但以功能简约却不简单,实用性非常强而受到关注。下面慧都就以一个最终用户经常提到的需求——下钻功能为例,来讲讲UXChart强大的实用性。

  向下钻取这个功能如今已经不单单在报表中流行了,一个好的图表工具一定也要具备此功能,从每年钻取到每月或从类别钻取到单个项目等等等等。UXChart能够帮助开发者快速在单个数据源中,创建无限下钻层级的图表。

  用一个简单的下钻图表的例子来展示这一功能,如果需要用一个图表来说明一个主从报表,那下钻图表就是最好的选择。

使用WebUI的新图表控件UXChart创建下钻图表

  创建下钻图表的步骤也非常简单,首先使用UXChart中的Child属性,来指定图表和需要展示详情的原始图表。具体来说,所有图表集合都需要被定义成视图中的第一位置。在第一次加载的时候,只能展示一个图表,其他的图表的可见性都应该被设置为折叠。详见以下代码:

<dataVisualisation:UXChart x:Name="Chart1" Visibility="Visible" Child="{Binding ElementName=Chart2}"
                        DrillDownCommand="{Binding DrillDownCommand}">
</dataVisualisation:UXChart>

<dataVisualisation:UXChart x:Name="Chart2" Visibility="Collapsed"  >
</dataVisualisation:UXChart>
Next, we need to hook our custom command to control the drilldown action, we called it DrillDownCommand.
  public DelegateCommand DrillDownCommand { get; set; }
And then we assign DrillDownCommand to some execute the method in our ViewModel.
 this.DrillDownCommand = new DelegateCommand(ExecuteDrillDown); 
In the execute method, we can initialize the data from the data source and retrieve detail information about the chart itself.
    
private void ExecuteDrillDown(object parameter)
{
   UXChartDrillDownCommandArgs args = parameter as UXChartDrillDownCommandArgs;

   if (args.Level == 1)
   {
     Data parent = args.DataPointContext as Data;
     if (parent != null)
     {
       InitializeDataByArea(parent.Area);
     }
   }
}

  总之,使用UXChart让创建带有向下钻取功能的图表非常简单,而且还是无限层级的,欢迎下载试用



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件网

登录慧都网发表评论登录


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Intersoft Premier Studio

专为复杂企业级移动、Web开发而设计的功能完善、客户端事件丰富的完整工具集

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat