2007年5月7日

系列最后一章，柱形图的制作 。

一、 生成柱形图

设置图表类型。

对于数据源的添加和其他图表相同，这里就不再说明。

二、 柱形图的样式设计

1 ）填充色的改变

获取了 ChartDataSeries 对象之后，设置 FillStayle 的 Color1 属性即会改变柱形的填充色。

2 ）渐变色彩的实现

渐变效果需要设置 FillType 为 Gradient 类型，并且必须设置 Color2 属性。

渐变效果图如下：

渐变效果源码下载地址：

http://www.blogjava.net/Files/kdboy/ChartBar1.rar  
 

3 ）多种颜色填充效果

说明：对于同一序列的柱形只能使用相同填充颜色，实现多种颜色填充，只能使用不同数据序列。所以，假如你只有一组数据，那么可以使用这种效果来制作图表。

首先，需要设置图标为叠加样式。

其次，需要将每条数据放置在不同的数据序列中，该序列颜色系统会自动分配。也可以在这里设置每个序列的颜色。

效果图如下：

多种颜色填充 源码下载地址：

http://www.blogjava.net/Files/kdboy/ChartBar2.rar  
 

三、 柱形图的 3D 效果

与饼图的 3D 效果相同，只需增加一下代码即可：

效果图如下：

源码略。

四、 其他。

对于柱形图的边线，可以设置 ChartGroup 的 ShowOutline 属性来禁止显示。改变其颜色，我也不知如何设置。

代码如下：

效果就是这样：

五、 结束

关于 WebChart 就介绍到这里，谢谢关注。

  2007年3月21日

这次演示饼图制作，简单介绍饼图的样式效果及 PlotArea 对象的一些属性。

一、生成饼图

设置图表类型。 
 

这里和折线图一样。

为图表添加数据。

这里与折线图不同的是饼图只需设置坐标轴的 Y 值即可，所有序列的相同索引的数据组合成一个饼图。这里将每一条数据放在一个新的数据序列里，并且每个序列都只有一个元素。这样，所有数据就会呈现在一个饼图中。如图：

这个就是默认的饼图样式，是不是少点什么呢？

接下来，介绍样式的设置。

二、饼图样式设计

1）  添加图例

设置 Legend 对象的 Visible 属性为 true ，图例就会显示出来。这时图例的标签默认为序列的名称。

设置图例标签的显示内容。为了代码简洁也可以在添加数据的同时设置。

另外，我们还可以使用 Legend 对象（图例对象）设置图例的显示样式。如：

设置图例显示位置。

其他一些属性，例如 Orientation 设置图例显示方向（以纵向显示或横向显示）等，不作详细介绍，可自己尝试使用。

2）  为了让数据更加直观，可在饼图添加标签

首先，实例化标签并设置标签内容及相关属性。

然后使用 AttachMethodData 对象设置标签附加在图表中的位置。

GroupIndex 是指图表索引。（第一篇文章提到过 WebChart 默认支持 2 个图表）

SeriesIndex 是指序列索引。

PointIndex  是指序列中的元素索引。

设置完成，效果图如下：

三、 3D 效果的实现 。

1 ）开启 3D 效果。

以 3D 样式显示，该步骤必须存在。

3）  设置 3D 样式

3D 样式是使用 PlotArea 对象的View3D属性来设置。

主要就是以上四个属性的设置。

显示效果如下：

四、补充概念

或许之前说到的各图形区域比较容易混淆，下面以图形介绍个图形区域：

灰色 为整个 WebChart 区域，对应对象就是 this.C1WebChart1 。

桔黄色 为图表区域，对应对象为 this.C1WebChart1.ChartArea 。

绿色 为绘图区，对应对象为 this.C1WebChart1.ChartArea.PlotArea 。

红色 为图表的上标题，对应对象为 this.C1WebChart1.Header 。

蓝色 为图表的下标题，对应对象为 this.C1WebChart1.Footer 。

使用相关对象可以设置个区域的样式效果。了解这些可以使用属性窗口快速设置一些简单样式。

五、结束

我希望通过一些实例能够比较全面的介绍 WebChart 的主要对象的使用。在下一次，会演示柱形图的制作。本次实例的完整代码下载地址如下：

 http://www.blogjava.net/Files/kdboy/ChartPie.rar

  2007年3月8日

    本篇文章将演示如何使用 WebChart 制作折线图。并通过示例介绍数据对象一些相关属性以及 ChartArea 的 Axis 的相关属性设置，并演示使用 WebChart 做交互式的设计。
    注：版本 ComponentOne.Studio.Enterprise.2006.v2 
        环境 .NET Compact Framework 1.1

一、生成折线图

1) 获取 WebChart 的第一个图标，并设置其图表类型为折线图

2) 为图表添加数据

获取数据。这里可以根据自己的业务需求，或自动生成或查询数据库，返回一个 DataSet 对象。

将数据封装在 PointF 类型的对象数组中。这里可以使用任何方式封装数据。

 

WebChart 默认会有 4 个数据序列，为了不让其他序列影响输出效果，清除序列集合中的所有序列，并且创建一个新的序列。

将数据添加至新建的数据序列中。这里使用 PointData 属性，同时为 X 、 Y 坐标付值。

到这里，我们便可以运行程序，看到一个有我们的数据生成的一个默认样式的折线图。下面来介绍使用 ChartDataSeries 对象设置图形的样式。

 
二、使用 ChartDataSeries 对象设置折线图样式

关于 ChartDataSeries 对象，之前已作了简单介绍，这里直接以代码介绍其部分属性。

设置折线为平滑曲线。

设置折线颜色为红色。

LineStyle 的相关属性：

Pattern - 设置折线的类型 （实心直线、点线等），其值为 LinePatternEnum 枚举类型。

Thickness – 设置折线厚度

设置折线上数据点的符号形状为倒三角，颜色为蓝色。

还可以通过 SymbolStyle 设置符号的大小，符号边线的颜色及厚度。可以自己尝试。

三、坐标轴的设置

获取图表的 X 坐标轴。

设置坐标轴刻度标签显示方式，这里使用 ValueLabels ，有用户来制定标签内容。默认为 Values 模式，有系统自动标注标签内容。

设置坐标轴刻度标签显示内容。

ax.ValueLabels.Add 的第一个参数为图表数据的 x 值，第二个参数为对应显示的标签文本。

设置刻度标签的旋转角度。

对于标签内容还可以使用属性 AnnoFormatString 来设置内容的格式。

设置坐标轴标题。

设置坐标轴标题的旋转角度。当坐标轴标题设置以后生效。

对于坐标轴标题，还可以设置它的 对齐方式，使用属性 Alignment 。

设置坐标轴的最大长度

相应的还有 Min 属性设置坐标轴的最小长度， Origin 属性 设置坐标轴原点。对应这些，还有 AutoMax 、 AutoMin 、 AutoOrigin 等 bool 类型的属性，表示是否自动设置。

对于刻度值的也有类似属性： UnitMajor 、 UnitMinor 设置主、副刻度的单位长度。以及对应的 auto 属性等。

除此之外，还有一些特殊属性：

Reverse 属性：使坐标轴反转。

ScrollBar 属性：为坐标轴添加滚动条。

Visible 属性：可以隐藏坐标轴。

OnTop 属性：可以设置坐标轴显示在图表上方。

等等。

在我们使用 .NET 开发环境中，会有智能感知的相关提示，对于对象属性的使用会简单得多。这里只介绍了主要的属性，其他属性可根据需要自行尝试。

四、交互式设计

为图表区域增加链接。

为折线上的数据点增加鼠标提示。（鼠标移至数据点的符号上，会提示你所设置文本）

C1WebChart1.ImageAreas.GetByName( " Footer " ).Attributes  =   " onclick=window.open('http://kdboy.spaces.live.com') " ;

为图表底部添加点击事件。

五、补充

这里设置图标下标题，并让图表 Footer 区域显示在图表中。

对于 C1WebChart 的相关属性比较简单，不再一一演示。

六、结束

以上是折线图的部分代码，完整示例可以通过下面链接下载。
下载地址：http://www.blogjava.net/Files/kdboy/2DChartXYPlot.rar

附录：

效果图

  2007年3月4日

    接下来的文章主要介绍如何使用代码设置实现 WebChart 图表。在制作 WebChart 制作图表之前，首先了解以下 WebChart 的主要对象。熟悉了各对象的功能，站在一定高度使用 WebChar ，会使我们的设计事半功倍。

一、 WebChart 的数据对象
    WebChart 中的数据对象有着特定的层级关系，如图：
    使用 WebChart 可以创建两个图表，每个图表对应一个 ChartGroup 。 ChartGroups 将这两个图表组织在 ChartGroupsCollection 中，通过 ChartGroup 的属性 ChartGroupsCollection 的下标索引或者使用 ChartGroups 中的属性 Group0 或 Group1 均可以返回其中一个图表，更简洁的你可以直接使用 ChartGroups 的下标索引也是同样效果。例：

    当然，在大多数情况下我们只需创建一个图表即可。在我们制作一些图表的时候会需要设置对象的 GroupIndex 属性，这里即为指定数据为哪个 ChartGroups 所有。通过 ChartGroup 对象，我们可以设置这个图表的样式、数据以及一些效果的显示。
    SeriesList 是该图表的数据序列的集合，它包含所有数据序列 ChartDataSeries 。每个序列对应最终生成的图表中的一组图形。例如，在折线图中创建 5 个数据序列，将会生成一个拥有 5 条折线的图表。

    ChartDataSeries 是我们创建图表的至关重要的一个类，它不仅包含着图表的数据对象 PointData ，而且还可以通过它设置生成图表的样式和效果（这里的样式和效果仅指数据部分）。
    图表的数据使用 ChartDataArray 存储，可以通过创建 ChartDataArray 对象，直接给图表的 XY 同时付值（使用属性 PiontData ），也可以分别给 X 或 Y 付值。例：

二、 WebChart 图表域对象
    除了 ChartGrouups ， ChartArea 是 C1Chart 的另一个非常重要的对象。除去和数据序列相关的图象，其他部分的样式效果大多都是通过 ChartArea 来设置。它主要包括对坐标轴的设置（ Axis ） 和 绘图域的设置(PlotArea)。
    现在 这部分不作主要介绍，在之后会以实例实例 简单介绍 CharArea 。

三、关于 C1Chart 的其他属性
    以上是 C1Chart 的两个最主要的属性。在 C1Chart 中还包括 ChartStyle 、 Header 以及 Footer 等属性，分别设置图表的整体样式以及头部、底部的样式。这些可以使用属性进行设置，修改之后即可看到效果，要比使用代码设置更加方便。
    另外， C1Chart 还有在第一章中提到的用于交互设计的一些属性 Attributes 、 Tooltip 等，只不过这个和之前的 ImageAreas 使用区域不同， C1Chart 设置的总是整体区域。
    其他就是和普通控件一样的高度宽度等属性 ….

四、结束
    关于 WebChar 对象简单介绍至此，详细的内容可以参考帮助内容，接下来以创建折线图的实例对以上对象进行讲解。

  2007年3月3日

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 创建折线图、饼图、柱形图，以及如何使用代码实现各种图表效果。