随笔-5  评论-13  文章-0  trackbacks-0

ComponentOne Studio Enterprise 是最大最全面的组件工具集,能够支持 Windows Web 和移动程序所有层面的开发。本人目前只使用其 WebChart 组件,现整理分享之。

一、 WebChart
介绍
    ComponentOne WebChart for .NET 是一种强大、通用并且使用方便的图表生成工具。程序员能使用 WebChart 创建完全面向功能,用户交互式图表。应用其广泛的特性和多样的图表类型能准确的显示复杂的数据集合并创建用户友好,专业级的图表应用程序。
   
WebChart 包含:
      2D 图表控件,可以以柱状图, X-Y 坐标图,面积图,饼图,雷达图,极坐标图以及组合图表形式显示数据。
      3D 图表控件,可以创建 3D 表面图,轮廓图和柱状图,可让用户方便地进行旋转,比例缩放或交互式缩放。

   这里只对 2D 图表控件作简单介绍。

二、安装

   安装时可以选择是否将 C1WebChart 组件添加到 GAC 中。

   另外,对于未注册版生成的图表会出现 ComponentOne 的印章,功能没有限制。

三、使用

1 、创建 .Net Web 应用程序,并将 WebChart 添加至 .Net 工具箱
   
打开工具箱,点击右键选择“添加移除项”,选择“ C1WebChart ”。如果安装时未将 C1WebChart 添加到 GAC 中,可以将安装目录下的 dll 组件 copy Web 应用 bin 目录下,然后添加。

2 、将 WebChart 添加到应用程序中
   
在工具栏添加以后,将其拖拽至页面中。这是会出现一个默认的 WebChart
   
但是运行程序的话,还需要在 Web.config 文件的 <system.web> 标签中添加以下内容:

< httpHandlers >
    
< add  verb ="*"  path ="c1chartimage.aspx"  type ="C1.Web.C1WebChart.ImageHttpHandler,C1.Web.C1WebChart" />
</ httpHandlers >

    该标签可以通过右键点击页面中的 WebChar 控件,选择“ HttpHandler string to clipboard (tagged) ”,直接 copy 至系统剪贴板中。
   
注:该标签表示使用内置 httpHandlers 转换图表图像。对于 Chart Image 的生成,有时间会另外介绍。
   
完成以上步骤,就可以运行应用程序看到一个使用默认样式以及随机数据生成的图表。

3 WebChart 配置
   
WebChart 提供了可视化的设计器,并且号称不使用任何代码完成数据绑定的图表。现在只对设计器的使用作简单介绍。
   
右键点击页面上的 WebChat ,选择“ Chart Wizard ”,可以按照步骤设置 WebChar 图表的类型,简单属性,以及绑定的数据序列。
   
另外,还可以使用“ Chart properties ”设置图表类型以及其他的一些属性,并且可以随时看到图表效果,清晰明了。
   
当然了,你还可以在 .Net 的属性窗口中看到 WebChart 的所有属性,如果对 WebChart 比较熟悉,在这里设置也是很方便的。

4 WebChar 交互式设计
   
你可以为生成的图表添加动态的 tooltip link 以及客户端脚本。图表的所有部件都包含在 ImageAreas 集合中,你可以通过属性窗口编辑 ImageAreas 集合,也可以添加相应相应代码实现该功能。 例:

// 设置图表区域的链接
C1WebChart1.ImageAreas.GetByName( " ChartArea " ).HRef  = " http://www.sina.com.cn " ;

// 设置图标数据区域的Tooltip(在折线图中,将鼠标移至数据点的符号上会看到效果)

C1WebChart1.ImageAreas.GetByName( " ChartData " ).Tooltip  =   " X={#XVAL}, Y={#YVAL:c} " ;
//
注:#XVAL为x坐标轴值,#YVAL为y坐标轴值。类似关键字可在帮助中查找。

// 添加鼠标点击事件

C1WebChart1.ImageAreas.GetByName( " ChartArea " ).Attributes  =   " onclick=window.open('url.com') " ;

5 、为 WebChart 添加数据
    应用程序图表数据大多来自外部数据库,也可以在程序中生成动态数据,但是无论使用哪种方式,都必须将数据添加至 WebChart ChartDataSeries
中。简单示例如下:

private   void  Page_Load( object  sender, EventArgs e)
{
    
//  get dataset (from db or cache)

    DataSet ds  =  GetDataSet();
    
//  create an array of data points

    PointF[] data  =   new  PointF[dv.Count]
    
for  ( int  i  =   0 ; i  <  data.Length; i ++
)
    
{
        
float  y  =   float .Parse(dv[i][ " ProductSales "
].ToString());
        data[i] 
=   new
 PointF(i, y);
    }

    
//  populate chart data points
    ChartDataSeries series  =    _c1webChart.ChartGroups[ 0 ].ChartData.SeriesList[ 0 ];
    series.PointData.CopyDataIn(data);
}



四、结束  
 
    以上为 WebChart 的简单使用,主要介绍了如何使用设计器创建图表。接下来将会以实例介绍如何使用 WebChart 创建折线图、饼图、柱形图,以及如何使用代码实现各种图表效果。

posted on 2007-03-03 01:34 kdboy 阅读(3649) 评论(6)  编辑  收藏 所属分类: ASP.NET

评论:
# re: ComponentOne WebChart的使用 - 1(概述) 2007-04-27 09:54 | sy
学习中,以前用过 c1chart,现在改用webchart了,正好学习一下.
我有个问题,柱状图的轮廓线默认是黑色的,不知道能否改成其他颜色.
因为我的柱状图上的数据很多时,就只能看到柱状图的轮廓线,图上就一片黑色了.以前用tchart这个控件的时候,柱状图的轮廓线颜色是能改的.  回复  更多评论
  
# re: ComponentOne WebChart的使用 - 1(概述) 2007-05-07 16:11 | kdboy
真的很抱歉,前段时间很忙。
柱形图轮廓线颜色可以禁止显示,设置 ChartGroup 的 ShowOutline 属性就可以。
对于改变颜色我也不晓得在哪里设置,如果改变颜色会不会也有一片红或者一片绿这样的情况呢。
你可以看下这篇文章http://www.blogjava.net/kdboy/archive/2007/05/07/115720.html
不知道可不可以解决你的问题。  回复  更多评论
  
# re: ComponentOne WebChart的使用 - 1(概述) 2007-10-13 14:51 | 于海洋
小弟第一次使图表控件,我下了您的那个饼图的例子,为什么把代码放到我的页面图片只显示一个叉叉呢?  回复  更多评论
  
# re: ComponentOne WebChart的使用 - 1(概述) 2007-10-13 14:53 | 于海洋
我用的是ASP.NET2.0.
还有,我在网上下了一个WEBCHART的DLL 怎么跟你例子中BIN夹下的DLL不一样啊?有什么区别吗?
小弟急等着用,方便请发邮箱告诉一下啊
QQ也可以 103630333  回复  更多评论
  
# re: ComponentOne WebChart的使用 - 1(概述) 2007-10-15 00:24 | kdboy
@于海洋:
我使用的WebChar版本是ComponentOne.Studio.Enterprise.2006.v2 ,.NET 使用的是1.1
你确认一下你的代码是否和你使用的版本一致。  回复  更多评论
  
# re: ComponentOne WebChart的使用 - 1(概述)[未登录] 2008-12-12 10:25 | 柠檬
请问你们的ComponentOne WebChart是不是试用版的,有没有破解的啊?????????????
希望能告诉我. QQ406232420  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: