ComponentOne WebChart的使用 - 1（概述）

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

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

[b]二、安装 [/b]
安装时可以选择是否将 C1WebChart 组件添加到 GAC 中。
另外，对于未注册版生成的图表会出现 ComponentOne 的印章，功能没有限制。

[b]三、使用[/b]
[color=blue]1 、创建 .Net Web 应用程序，并将 WebChart 添加至 .Net 工具箱[/color]
打开工具箱，点击右键选择“添加移除项”，选择“ C1WebChart ”。如果安装时未将 C1WebChart 添加到 GAC 中，可以将安装目录下的 dll 组件 copy 至 Web 应用 bin 目录下，然后添加。
[color=blue]
2 、将 WebChart 添加到应用程序中[/color]
在工具栏添加以后，将其拖拽至页面中。这是会出现一个默认的 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 的生成，有时间会另外介绍。
完成以上步骤，就可以运行应用程序看到一个使用默认样式以及随机数据生成的图表。

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

[color=blue]4 、 WebChar 交互式设计[/color]
你可以为生成的图表添加动态的 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') " ; 

[color=blue]5 、为 WebChart 添加数据[/color]
应用程序图表数据大多来自外部数据库，也可以在程序中生成动态数据，但是无论使用哪种方式，都必须将数据添加至 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);
} 

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