WebChart的使用.docx
《WebChart的使用.docx》由会员分享，可在线阅读，更多相关《WebChart的使用.docx（25页珍藏版）》请在冰豆网上搜索。
WebChart的使用
ComponentOneWebChart的使用-1（概述）
ComponentOneStudioEnterprise是最大最全面的组件工具集，能够支持Windows、Web和移动程序所有层面的开发。
本人目前只使用其WebChart组件，现整理分享之。
一、WebChart介绍
ComponentOneWebChartfor.NET是一种强大、通用并且使用方便的图表生成工具。
程序员能使用WebChart创建完全面向功能，用户交互式图表。
应用其广泛的特性和多样的图表类型能准确的显示复杂的数据集合并创建用户友好，专业级的图表应用程序。
WebChart包含:
2D图表控件，可以以柱状图，X-Y坐标图，面积图，饼图，雷达图，极坐标图以及组合图表形式显示数据。
3D图表控件，可以创建3D表面图，轮廓图和柱状图，可让用户方便地进行旋转，比例缩放或交互式缩放。
这里只对2D图表控件作简单介绍。
二、安装
安装时可以选择是否将C1WebChart组件添加到GAC中。
另外，对于未注册版生成的图表会出现ComponentOne的印章，功能没有限制。
三、使用
1、创建.NetWeb应用程序，并将WebChart添加至.Net工具箱
打开工具箱，点击右键选择“添加移除项”，选择“C1WebChart”。
如果安装时未将C1WebChart添加到GAC中，可以将安装目录下的dll组件copy至Web应用bin目录下，然后添加。
2、将WebChart添加到应用程序中
在工具栏添加以后，将其拖拽至页面中。
这是会出现一个默认的WebChart。
但是运行程序的话，还需要在Web.config文件的标签中添加以下内容：
该标签可以通过右键点击页面中的WebChar控件，选择“HttpHandlerstringtoclipboard（tagged）”，直接copy至系统剪贴板中。
注：
该标签表示使用内置httpHandlers转换图表图像。
对于ChartImage的生成，有时间会另外介绍。
完成以上步骤，就可以运行应用程序看到一个使用默认样式以及随机数据生成的图表。
3、WebChart配置
WebChart提供了可视化的设计器，并且号称不使用任何代码完成数据绑定的图表。
现在只对设计器的使用作简单介绍。
右键点击页面上的WebChat，选择“ChartWizard”，可以按照步骤设置WebChar图表的类型，简单属性，以及绑定的数据序列。
另外，还可以使用“Chartproperties”设置图表类型以及其他的一些属性，并且可以随时看到图表效果，清晰明了。
当然了，你还可以在.Net的属性窗口中看到WebChart的所有属性，如果对WebChart比较熟悉，在这里设置也是很方便的。
4、WebChar交互式设计
你可以为生成的图表添加动态的tooltip、link以及客户端脚本。
图表的所有部件都包含在ImageAreas集合中，你可以通过属性窗口编辑ImageAreas集合，也可以添加相应相应代码实现该功能。
例：
//设置图表区域的链接
C1WebChart1.ImageAreas.GetByName（"ChartArea"）.HRef ="";
//设置图标数据区域的Tooltip（在折线图中，将鼠标移至数据点的符号上会看到效果）
C1WebChart1.ImageAreas.GetByName（"ChartData"）.Tooltip = "X={#XVAL}, Y={#YVAL:
c}";
//注：
#XVAL为x坐标轴值，#YVAL为y坐标轴值。
类似关键字可在帮助中查找。
//添加鼠标点击事件
C1WebChart1.ImageAreas.GetByName（"ChartArea"）.Attributes = "onclick=window.open（''）";
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创建折线图、饼图、柱形图，以及如何使用代码实现各种图表效果。
ComponentOneWebChart的使用-2（对象介绍）
接下来的文章主要介绍如何使用代码设置实现WebChart图表。
在制作WebChart制作图表之前，首先了解以下WebChart的主要对象。
熟悉了各对象的功能，站在一定高度使用WebChar，会使我们的设计事半功倍。
一、WebChart的数据对象
WebChart中的数据对象有着特定的层级关系，如图：
使用WebChart可以创建两个图表，每个图表对应一个ChartGroup。
ChartGroups将这两个图表组织在ChartGroupsCollection中，通过ChartGroup的属性ChartGroupsCollection的下标索引或者使用ChartGroups中的属性Group0或Group1均可以返回其中一个图表，更简洁的你可以直接使用ChartGroups的下标索引也是同样效果。
例：
C1WebChart1.ChartGroups.ChartGroupsCollection[0];
C1WebChart1.ChartGroups.Group0;
C1WebChart1.ChartGroups[0];
当然，在大多数情况下我们只需创建一个图表即可。
在我们制作一些图表的时候会需要设置对象的GroupIndex属性，这里即为指定数据为哪个ChartGroups所有。
通过ChartGroup对象，我们可以设置这个图表的样式、数据以及一些效果的显示。
SeriesList是该图表的数据序列的集合，它包含所有数据序列ChartDataSeries。
每个序列对应最终生成的图表中的一组图形。
例如，在折线图中创建5个数据序列，将会生成一个拥有5条折线的图表。
C1WebChart1.ChartGroups[0].ChartData.SeriesList[0]; //获取图表第一个数据序列
ChartDataSeries是我们创建图表的至关重要的一个类，它不仅包含着图表的数据对象PointData，而且还可以通过它设置生成图表的样式和效果（这里的样式和效果仅指数据部分）。
图表的数据使用ChartDataArray存储，可以通过创建ChartDataArray对象，直接给图表的XY同时付值（使用属性PiontData），也可以分别给X或Y付值。
例：
C1WebChart1.ChartGroups[0].ChartData.SeriesList[0].PointData.CopyDataIn（data）;
二、WebChart图表域对象
除了ChartGrouups，ChartArea是C1Chart的另一个非常重要的对象。
除去和数据序列相关的图象，其他部分的样式效果大多都是通过ChartArea来设置。
它主要包括对坐标轴的设置（Axis）和绘图域的设置（PlotArea）。
现在这部分不作主要介绍，在之后会以实例实例简单介绍CharArea。
三、关于C1Chart的其他属性
以上是C1Chart的两个最主要的属性。
在C1Chart中还包括ChartStyle、Header以及Footer等属性，分别设置图表的整体样式以及头部、底部的样式。
这些可以使用属性进行设置，修改之后即可看到效果，要比使用代码设置更加方便。
另外，C1Chart还有在第一章中提到的用于交互设计的一些属性Attributes、Tooltip等，只不过这个和之前的ImageAreas使用区域不同，C1Chart设置的总是整体区域。
其他就是和普通控件一样的高度宽度等属性….
四、结束
关于WebChar对象简单介绍至此，详细的内容可以参考帮助内容，接下来以创建折线图的实例对以上对象进行讲解。
ComponentOneWebChart的使用-3（折线图）
本篇文章将演示如何使用WebChart制作折线图。
并通过示例介绍数据对象一些相关属性以及ChartArea的Axis的相关属性设置，并演示使用WebChart做交互式的设计。
注：
版本ComponentOne.Studio.Enterprise.2006.v2
环境.NETCompactFramework1.1
一、生成折线图
1）获取WebChart的第一个图标，并设置其图表类型为折线图
C1WebChart1.ChartGroups[0].ChartType = Chart2DTypeEnum.XYPlot;
2）为图表添加数据
DataSet ds = GetDataSet（）;
获取数据。
这里可以根据自己的业务需求，或自动生成或查询数据库，返回一个DataSet对象。
DataView dv = new DataView（ds.Tables["sanguo"]）;
PointF[] data = （PointF[]）Array.CreateInstance（typeof（PointF）, dv.Count）;
int i;
for（i=0; i < data.Length; i++）
{
float y = float.Parse（dv[i]["value"].ToString（））;
data[i] = new PointF（i, y）;
}
将数据封装在PointF类型的对象数组中。
这里可以使用任何方式封装数据。
//清除图表所有数据序列
C1WebChart1.ChartGroups[0].ChartData.SeriesList.Clear（）;
//创建一个新的数据序列，并设置数据
ChartDataSeries series = C1WebChart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries（）;
WebChart默认会有4个数据序列，为了不让其他序列影响输出效果，清除序列集合中的所有序列，并且创建一个新的序列。
series.PointData.CopyDataIn（data）;
将数据添加至新建的数据序列中。
这里使用PointData属性，同时为X、Y坐标付值。
到这里，我们便可以运行程序，看到一个有我们的数据生成的一个默认样式的折线图。
下面来介绍使用ChartDataSeries对象设置图形的样式。
二、使用ChartDataSeries对象设置折线图样式
关于ChartDataSeries对象，之前已作了简单介绍，这里直接以代码介绍其部分属性。
series.FitType = FitTypeEnum.Spline;
设置折线为平滑曲线。
series.LineStyle.Color = Color.Red;
设置折线颜色为红色。
LineStyle的相关属性：
Pattern-设置折线的类型（实心直线、点线等），其值为LinePatternEnum枚举类型。
Thickness–设置折线厚度
series.SymbolStyle.Shape = SymbolShapeEnum.InvertedTri;
series.SymbolStyle.Color = Color.Blue;
设置折线上数据点的符号形状为倒三角，颜色为蓝色。
还可以通过SymbolStyle设置符号的大小，符号边线的颜色及厚度。
可以自己尝试。
三、坐标轴的设置
Axis ax = C1WebChart1.ChartArea.AxisX;
获取图表的X坐标轴。
ax.AnnoMethod = AnnotationMethodEnum.ValueLabels;
设置坐标轴刻度标签显示方式，这里使用ValueLabels，有用户来制定标签内容。
默认为Values模式，有系统自动标注标签内容。
for（i = 0; i < data.Length; i++）
{
DataRowView drv = dv[i];
ax.ValueLabels.Add（i, （string）drv["name"]）;
}
设置坐标轴刻度标签显示内容。
ax.ValueLabels.Add的第一个参数为图表数据的x值，第二个参数为对应显示的标签文本。
ax.AnnotationRotation = -60;
设置刻度标签的旋转角度。
对于标签内容还可以使用属性AnnoFormatString来设置内容的格式。
ax.Text = "X 坐标轴 ";
设置坐标轴标题。
ax.Rotation = RotationEnum.Rotate90;
设置坐标轴标题的旋转角度。
当坐标轴标题设置以后生效。
对于坐标轴标题，还可以设置它的对齐方式，使用属性Alignment。
ax.Max = data.Length - .5;
设置坐标轴的最大长度
相应的还有Min属性设置坐标轴的最小长度，Origin属性设置坐标轴原点。
对应这些，还有AutoMax、AutoMin、AutoOrigin等bool类型的属性，表示是否自动设置。
对于刻度值的也有类似属性：
UnitMajor、UnitMinor设置主、副刻度的单位长度。
以及对应的auto属性等。
除此之外，还有一些特殊属性：
Reverse属性：
使坐标轴反转。
ScrollBar属性：
为坐标轴添加滚动条。
Visible属性：
可以隐藏坐标轴。
OnTop属性：
可以设置坐标轴显示在图表上方。
等等。
在我们使用.NET开发环境中，会有智能感知的相关提示，对于对象属性的使用会简单得多。
这里只介绍了主要的属性，其他属性可根据需要自行尝试。
四、交互式设计
C1WebChart1.ImageAreas.GetByName（"ChartArea"）.href="" temp_href="";
为图表区域增加链接。
C1WebChart1.ImageAreas.GetByName（"ChartData"）.Tooltip = "X={#XVAL}, Y={#YVAL:
c}";
为折线上的数据点增加鼠标提示。
（鼠标移至数据点的符号上，会提示你所设置文本）
C1WebChart1.ImageAreas.GetByName（"Footer"）.Attributes = "onclick=window.open（''）";
为图表底部添加点击事件。
五、补充
C1WebChart1.Footer.Text = "Web Chart Test!
";
C1WebChart1.Footer.Visible = true;
这里设置图标下标题，并让图表Footer区域显示在图表中。
对于C1WebChart的相关属性比较简单，不再一一演示。
六、结束
以上是折线图的部分代码，完整示例可以通过下面链接下载。
下载地址：
ComponentOneWebChart的使用-4（饼图）
这次演示饼图制作，简单介绍饼图的样式效果及PlotArea对象的一些属性。
一、生成饼图
C1WebChart1.ChartGroups.Group0.ChartType = Chart2DTypeEnum.Pie;
设置图表类型。
DataSet ds = GetDataSet（）;
DataView dv = new DataView（ds.Tables["sanguo"]）;
//清除图表所有数据序列
C1WebChart1.ChartGroups[0].ChartData.SeriesList.Clear（）;
这里和折线图一样。
for（int i=0; i < dv.Count; i++）
{
ChartDataSeries series = C1WebChart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries（）;
series.PointData.Length = 1;
series.Y[0] = float.Parse（dv[i]["value"].ToString（））;
}
为图表添加数据。
这里与折线图不同的是饼图只需设置坐标轴的Y值即可，所有序列的相同索引的数据组合成一个饼图。
这里将每一条数据放在一个新的数据序列里，并且每个序列都只有一个元素。
这样，所有数据就会呈现在一个饼图中。
如图：
这个就是默认的饼图样式，是不是少点什么呢？
接下来，介绍样式的设置。
二、饼图样式设计
1） 添加图例
C1WebChart1.Legend.Visible = true;
设置Legend对象的Visible属性为true，图例就会显示出来。
这时图例的标签默认为序列的名称。
for（int i=0; i < dv.Count; i++）
{
ChartDataSeries series = C1WebChart1.ChartGroups[0].ChartData.SeriesList[i];
series.Label=dv[i]["name"].ToString（）;
}
设置图例标签的显示内容。
为了代码简洁也可以在添加数据的同时设置。
另外，我们还可以使用Legend对象（图例对象）设置图例的显示样式。
如：
C1WebChart1.Legend.Compass = CompassEnum.West;
设置图例显示位置。
其他一些属性，例如Orientation设置图例显示方向（以纵向显示或横向显示）等，不作详细介绍，可自己尝试使用。
2） 为了让数据更加直观，可在饼图添加标签
for（int i=0; i < dv.Count; i++）
{
C1.Win.C1Chart.Label lbl = C1WebChart1.ChartLabels.LabelsCollection.AddNewLabel（）;
lbl.Text = string.Format（"{0}%",float.Parse（dv[i]["value"].ToString（）））;
lbl.Compass = LabelCompassEnum.Radial;
lbl.Offset = 20;
lbl.Connected = true;
lbl.Visible = true;
lbl.AttachMethod = AttachMethodEnum.DataIndex;
AttachMethodData am = lbl.AttachMethodData;
am.GroupIndex = 0;
am.SeriesIndex = i;
am.PointIndex = 0;
升级会员 