2. LineConnectionTypes 折线图连接点样式 Round 圆形 Square 方形 None 没有任何样式 3. Direction 方向枚举 LeftRight 从左到右 TopBottom 从上到下 RightLeft 从右到左 BottomTop 从下到上 4. ColorS

Size: px

Start display at page:

Download "2. LineConnectionTypes 折线图连接点样式 Round 圆形 Square 方形 None 没有任何样式 3. Direction 方向枚举 LeftRight 从左到右 TopBottom 从上到下 RightLeft 从右到左 BottomTop 从下到上 4. ColorS"

相署骆
5 years ago
Views:

1 Chartlet 参考手册一. 前言一个属性设置, 一个数据源绑定, 展现给你一幅漂亮的图表这就是 Chartlet,2 句代码搞定一幅漂亮的图表, 让我们的编程更简洁, 让我的图表更漂亮 Chartlet 是一个为 ASP.NET 设计的免费的图表控件, 用来在 ASP.NET 页面上将数据库的数据动态转换成统计图表显示如今成熟的.net 图表控件有很多, 但是大多数都是国外的, 而且几乎都是收费的, 只适合大型的商业应用, 不适合一般的应用开发, 而 Chartlet 正是为了满足大家一般应用而开发的免费的控件,Chartlet 提供的图表应该可以满足大家的基本图表要求, 而且我们一直在更新它, 使它变得更加强大和完善请登录获得最新版本的控件二. 快速上手 Chartlet 的使用分简单模式和复杂模式两种简单模式下你只需要设置一个属性, 绑定一个数据源就能搞定一个漂亮的图标 ; 复杂模式下你可以选择所有属性, 这种方式的灵活性非常高, 你可以控制图标显示效果的每一个细节如果你的使用要求不是很苛刻, 我们建议你使用简单模式, 这样不会占据你宝贵的开发时间, 让你专注于你的项目开发, 而不是专研控件的使用而且对于一般的开发人员来说选择漂亮的配色, 配置图形的显示边框, 投影效果, 水晶高光效果也不是一个很容易的事情我们在简单模式下提供的显示效果都是我们精心挑选出来的, 应该能满足一般的需求当然你有时间可以了解一下 Chartlet 的所有属性对你是极其有帮助的, 这样会给你有足够的灵活度, 在简单模式下无法达到的效果你可以手动选择相应的属性来实现, 你可以先选择一个简单模式下的显示效果, 然后再手动设置你要修改的属性来进行微调 ( 简单模式实际上就是把漂亮效果实现的众多的属性设置都打包, 你只需要选来用 ) 一个属性是指 Chartlet.AppearanceStyle, 它的取值来自 FanG.Chartlet.AppearanceStyles 枚举类型, 你在设置的时候只需要选择一个枚举项就好了 Chartlet1.AppearanceStyle=FanG.Chartlet.AppearanceStyles.Bar_2D_StarryNight_FlatCrystal_Glow_TextureBorder; 一个数据源的绑定是指调用 Chartlet. BindChartData(SqlDataSource DataSource) 方法, 将 ASP.NET 网页上的一个 SqlDataSource 作为数据源作为参数传入就好了上面的属性和方法可以在下文里找到详细的介绍, 如果你下载控件是带有演示页面的, 那么在 index.aspx 里面有详细的演示, 你会看到将数据库中的数据显示成统计图表真的就是 2 句代码搞定的, 而且真的也非常漂亮三. Chartlet 参考下面介绍一下 Chartlet 的属性方法和一些使用技巧, 让大家能够很快地上手命名空间 :FanG 类 :Chartlet 一. 公用枚举 1. ChartTypes 图表类型 Bar 柱状图 Line 折线图

2 2. LineConnectionTypes 折线图连接点样式 Round 圆形 Square 方形 None 没有任何样式 3. Direction 方向枚举 LeftRight 从左到右 TopBottom 从上到下 RightLeft 从右到左 BottomTop 从下到上 4. ColorStyles 颜色风格 None 不使用任何风格 Breeze 使用明快颜色数组 Aurora 使用绚烂颜色数组 StarryNight 使用厚重颜色数组 5. AppearanceStyles 外观风格 ( 简单模式下你只需要设置这一个属性 ) None_None_None_None_None_None, Bar_2D_Breeze_NoCrystal_NoGlow_NoBorder, Bar_2D_Breeze_NoCrystal_Glow_WhiteBorder Bar_2D_Aurora_FlatCrystal_Glow_WhiteBorder, Bar_2D_StarryNight_FlatCrystal_Glow_NoBorder, Line_2D_StarryNight_ThickRound_NoGlow_NoBorder, Line_2D_StarryNight_ThickRound_Glow_NoBorder, Pie_2D_Breeze_NoCrystal_NoGlow_NoBorder, Pie_2D_Breeze_NoCrystal_NoGlow_WhiteBorder, 注 : 图表类型 _ 维数效果 _ 颜色样式 _ 水晶效果 _ 投影效果 _ 边框效果 6. ChartDimesions 图表维度 (2D/3D) Chart2D, Chart3D 二. 属性 : ChartTitle string 类型, 代表图表的名称, 将显示在图表的上方 Dimension 枚举 ChartDimesions 类型, 代表 2D 还是 3D 效果 ChartType 枚举 ChartTypes 类型, 代表图表的类型 XUnit string 类型, 代表横坐标的单位, 将显示在横坐标的右边 YUnit string 类型, 代表纵坐标的单位, 将显示在纵坐标的上方 RootPath string 类型, 设计模式下图片暂存路径, 一般不需要设置 GroupSize int 类型,BarChart 的组的大小,LineChart 的条数 MaxValueY double 类型, 纵坐标的最大值, 用来标准化纵坐标的数值, 和统一调整所有图形的高度 TipsShow bool 类型, 是否在图形上显示数值标签 AutoBarWidth bool 类型, 是否自动计算柱状图的宽度 ( 在柱子很少时有效, 防止太宽影响视觉效果 )

3 XLabelRotateAngle float 类型, 横坐标旋转角度 FillColor1 Color 类型, 填充颜色 1 FillColor2 Color 类型, 填充颜色 2 FillColor3 Color 类型, 填充颜色 3 StrokeColor1 Color 类型, 边框颜色 1 StrokeColor2 Color 类型, 边框颜色 2 StrokeColor3 Color 类型, 边框颜色 3 FillColorStyle ColorStyles 类型, 填充颜色使用哪一组颜色 StrokeColorStyle ColorStyles 类型, 边框 ( 线 ) 颜色使用哪一组颜色 FillShiftStep int 类型, 颜色数组循环偏移量, 从颜色数组中选择不同的颜色 StrokeShiftStep int 类型, 颜色数组循环偏移量, 从颜色数组中选择不同的颜色 LineWidth int 类型, 折线图的线宽, 其他图形的边框宽度 LineTextureEnable bool 类型, 是否使用纹理边框 LineTextureStyle HatchStyle 类型, 纹理风格 Depth3D int 类型,3D 效果的纵向深度 Alpha3D byte 类型,3D 图形的透明度 < 下面两个属性仅用于柱状图 > RoundRectangle bool 类型, 是否使柱状图使用圆角矩形 RoundRadius int 类型, 圆角半径 < 下面三个属性仅用于折线图 > LineConnectionType LineConnectionTypes 类型, 折线连接点的类型 LineConnectionRadius int 类型, 折线链接点的半径或者宽度 < 下面是投影的相关属性 > Shadow Enable bool 类型, 是否使用投影 Radius int 类型, 阴影半径 Distance intl 类型, 阴影偏移距离 Angle float 类型, 阴影偏移角度 Alpha byte 类型, 投影颜色的透明度 0 ~ 255 Color Color 类型, 阴影的颜色 Hollow bool 类型, 是否使用空心投影 ( 只对图形边框进行投影 ) 注 : 在页面 (xx.aspx) 上使用上面的属性时写法如 :Shadow-Enable= true 在代码 (xx.cs) 里使用上面的属性时写法如 :Shadow.Enable=true; 似乎在 Visual web developer 的设计视图中, 在属性窗口中修改上述属性不起作用 < 下面是水晶效果的相关属性 > Crystal Enable bool 类型, 是否使用水晶效果 CoverFull bool 类型, 水晶效果覆盖图形的全部还是一般 Contraction int 类型, 水晶效果收缩像素

4 Direction Direction 枚举, 水晶效果放射的方向注 :Crystal 属性的使用方法和 Shadow 一样三. 方法 1. BindChartData(SqlDataSource DataSource) 此方法将 SqlDataSouce 中的数据绑定到 Chartlet 控件, 需要在页面上放置一个 SqlDataSource 控件, 设置好数据源, 然后在后台代码中 (xx.cs) 中调用一下这个方法, 就可将数据库中的数据绑定到 Chartlet 了注 : 需要将数据库的中数据在 SQL 里组织成标准的数据表格式, 格式见附图注 : 此方法有四个构造函数, 支持 DataSet,DataTable,DataView,SqlDataSource 四个常用的数据源, 用法都一样, 直接把你的数据源 (DataSet,DataTable,DataView, SqlDataSource) 当做参数传给 BindChartData() 方法就可以了 BindChartData(DataSet DataSource) BindChartData(DataTable DataSource) BindChartData(DataView DataSource) 2. InitializeData(ArrayList[ ] ChartData, ArrayList XLabel, ArrayList ColorGuider) 此方法用 ArrayList 绑定数据, 需要你事先在代码里把数据库里查询来的数据组织成 ArrayList, 再把 ArrayList 当作参数传入 InitializeData() 方法绑定到 Chartlet 控件, 这个方法比较繁琐, 但是却很灵活, 当你的数据库结构比较复杂, 无法组织成标准的数据表结构时, 就可以使用这个方法 ArrayList[ ] ChartData ArrayList 数据 ArrayList XLabel 横坐标标识数组 ArrayList ColorGuider 图例说明具体使用见 Test.aspx 实例四. 使用技巧 Chartlet.BindChartData() 标准数据表格式

5 一. 在选定 AppearanceStyle 之后进行微调为什么要进行微调? 1. 如果纯粹的自己去设置每个属性来获得一幅很漂亮的图表, 确实很不容易, 也很辛苦, 而且要透彻了解每一个属性的含义, 我们觉得这样会浪费你很多宝贵的时间 2. 我们为您准备的外观样式 (AppearanceStyle) 有时候不能满足您的需求 ( 这种情况肯定是有的 ), 而挑剔的您也许只是对某一些部分不够满足, 你需要修改某个部分的设置而已在这种情况下, 您就需要在 AppearanceStyle 的基础上在进行微调, 只需要再修改一两个属性就能够满足您挑剔的眼光下面我们举一例说明微调的巨大作用效果上面这幅图, 是我们在 index.aspx 里面使用的实例我们使用的外观样式是 AppearanceStyles.Bar_2D_Aurora_FlatCrystal_Glow_NoBorder 颜色是 Aurora 颜色数组里面默认的前三种颜色, 您起始可以修改一个属性调用其他颜色我们在设置 AppearanceStyle 之后加上一句 Chartlet1.FillShiftStep = 8; 就会使用 Aurora 颜色数组中的第八, 九, 十颜色, 下图是效果, 是不是感觉不一样啊?

6 我们还可以修改其他属性, 现在我们修改一下水晶效果的收缩属性 Crystal.Contraction=2 ( 这个属性的值不宜过大, 当然选择较大值的时候也会得到意想不到的夸张效果 ) ( 是不是发觉没有什么变化, 其实改变在于细节 )

7 ( 这张夸张了点 Crystal.Contraction=6, 有没有想过 Crystal.Contraction=0 时候的效果 ) ( 这一幅就是 Crystal.Contraction=0, 我觉得少了一点水晶的效果, 当然这种风格也很好看, 你可以把这一幅的投影属性修改一下, 强化一下投影效果, 立体感应该会很强的 ) 您可以练习一下对其它属性的微调注, 微调要在选定 AppearanceStyle 之后, 你所设置的微调属性的值都会覆盖 AppearanceStylez 自动设置的值

ASP.Net 程序里, 能创造出一摸一样的效果, 这种尝试办法会比你在程序里修改不同属性, 然后在浏览器里刷新看效果要方便的多我们以后会在 Demo 页面上提供属性设置的下载功能, 让你可以通过一个点击就能把所有设置通过文本文件下载下来,

8 二. 在设置属性之前, 先到 Chartlet 网站上的 Demo.aspx 上尝试不同属性值的效果在 Chartlet 网站上有个在线试用的页面 Demo.aspx 和 DemoCom.aspx 在这两个网页上你可以修改不同属性的值来查看它们都有什么效果, 让你对控件属性有一个比较感性的认识, 当然也是你调配漂亮图片的非常好的工具, 你在网页上通过修改不同属性得到了一个很漂亮的效果, 你就可以把这些属性值记下来, 写在你的 ASP.Net 程序里, 能创造出一摸一样的效果, 这种尝试办法会比你在程序里修改不同属性, 然后在浏览器里刷新看效果要方便的多我们以后会在 Demo 页面上提供属性设置的下载功能, 让你可以通过一个点击就能把所有设置通过文本文件下载下来, 你可以直接复制到.net 程序里面去五. 使用帮助一. 将 Chartlet 控件加入 Visual Web Developer(Visual Studio) 工具箱步骤 : 在工具箱空白位置右击 -> 选择项 -> 浏览找到你下载的 Chartlet.dll, 然后确定添加工具箱添加工具箱

成功添加到工具箱 ( 如图所示, 依照上面三个步骤就可以将 Chartlet 控件加入到工具箱了,Chartlet 图标会显示在工具箱内, 当然你下载的 FanG.ico 如果被删除了, 就无法显示图标了, 会变成默认的齿轮图标 ) 二. 在 ASP.NET 页面上使用 Chartlet 控件步骤 : 1. 直接从工具箱中将控件拖到你的 ASP.

9 成功添加到工具箱 ( 如图所示, 依照上面三个步骤就可以将 Chartlet 控件加入到工具箱了,Chartlet 图标会显示在工具箱内, 当然你下载的 FanG.ico 如果被删除了, 就无法显示图标了, 会变成默认的齿轮图标 ) 二. 在 ASP.NET 页面上使用 Chartlet 控件步骤 : 1. 直接从工具箱中将控件拖到你的 ASP.NET 页面上, 页面上就会显示默认的图表将 Chartlet 控件拖到页面上 ( 注 : 在 Visual Studio 设计视图里显示的数据是 Chartlet 里的默认数据, 只提供设计时视觉参考, 让你在设置了控件属性后能有一个感官认识, 运行时数据是你下面要在后台代码里从数据库加载的数据 ) 此时你转入当前页面 ( 这里是 FanG.aspx) 的代码视图, 会看到页面上多了两行代码 <%@ Register assembly="chartlet" namespace="fang" tagprefix="cc1" %> <cc1:chartlet ID="Chartlet1" runat="server" /> 这两行代码都是 Visual Studio 自动帮你生成的, 第一句是在页面上注册 Chartlet 控件, 第二句是在页面上使用 Chartlet 控件, 如果你没有将 Chartlet.dll 复制到你的网站的 Bin 目录中, 它会提示你拷贝, 确定拷贝就可以了

$2. 设置 Chartlet 控件的显示属性你可以在属性窗口中设置, 也可以在代码视图里设置, 还可以在后台代码里动态设置代码视图 (FanG.aspx) 中设置 <cc1:chartlet ID="Chartlet1" runat="server" ChartTitle="Jesy Sales" Shadow-Enable="true" /> 后台代码 (FanG.aspx.cs) 中设置 ( 这里设置的属性只有在页面运行时 ( 浏览器中 ) 才能起作用 ) protected void Page_Load(object sender, EventArgs e){ Chartlet1.$

10 2. 设置 Chartlet 控件的显示属性你可以在属性窗口中设置, 也可以在代码视图里设置, 还可以在后台代码里动态设置代码视图 (FanG.aspx) 中设置 <cc1:chartlet ID="Chartlet1" runat="server" ChartTitle="Jesy Sales" Shadow-Enable="true" /> 后台代码 (FanG.aspx.cs) 中设置 ( 这里设置的属性只有在页面运行时 ( 浏览器中 ) 才能起作用 ) protected void Page_Load(object sender, EventArgs e){ Chartlet1.MaxValueY = 1000; Chartlet1.Shadow.Radius = 5; } 在属性窗口中设置 ( 注 : 在页面上 (FanG.aspx) 设置的属性 ( 包括代码中和属性窗口中 ) 都会在设计视图中实时显示设置效果, 其中在属性窗口中设置 Shadow 的各个属性时似乎不起作用, 如果要设置请转入代码视图 ) < 下面就是从数据库中加载数据的工作了 > 3. 在页面上放置 SqlDataSource 在页面上 (FanG.aspx) 放置一个 SqlDataSource, 并设置好数据源, 连接数据库, 选择相应的表和需要的字段 ( 数据格式一定要组织称标准的格式, 参看第一节的附图 ) 4. 在代码 (FanG.aspx.cs) 里将 SqlDataSource 作为参数传给 Chartlet.BindChartData() 方法 <asp:sqldatasource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:FanG Sample %>" ProviderName="<%$ ConnectionStrings:FanG Sample.ProviderName %>" SelectCommand="Select Season,Profit from Sales where User='Jesy'"> </asp:sqldatasource> protected void Page_Load(object sender, EventArgs e) {

11 Chartlet1.MaxValueY = 1000; Chartlet1.Shadow.Radius = 5; Chartlet1.BindChartData(SqlDataSource1); } ( 好了, 在浏览器中查看你的网页吧, 你就可以看到漂亮的图表了, 我们也把这个示例 (FanG.aspx) 放在了下载包中, 如果你使用时遇到问题可以作为参考, 当然你要修改 Web.config 中的连接字符串 ) 下面把刚才那个页面 FanG.aspx 运行结果贴出来 FanG.aspx 运行截图六. 致谢最后, 非常感谢大家使用 Chartlet 控件, 希望我们的控件能给你的开发带来帮助如果有任何问题请不要忘了联系我们, 我们将非常感激

BindChartData(SqlDataSource1) 注意 : 不管是什么数据源, 都需要按照 Chartlet 标准数据格式组织数据 : 除第一列以外, 其他列必须为数值类型 ( 第一类会作为 X 坐标显示, 其他列会作为数据来创建图形 ) 这个在 SQL 语句中很容易做到, 大家只要充分

BindChartData(SqlDataSource1) 注意 : 不管是什么数据源, 都需要按照 Chartlet 标准数据格式组织数据 : 除第一列以外, 其他列必须为数值类型 ( 第一类会作为 X 坐标显示, 其他列会作为数据来创建图形 ) 这个在 SQL 语句中很容易做到, 大家只要充分 Chartlet 参考手册 [ 官方 ] void BindChartData(DataSource) 方法 void BindChartData(DataSource) 此方法是用来给 Chartlet 控件绑定数据的, 这个方法在后台.cs 文件中调用, 一般放在 Chartlet 所有属性设置语句的最后如果在.aspx 页面上放置了 Chartlet 控件示例, 而忘了在后台.cs 文件中绑定数据源,