[项目过程中所遇到的各种问题记录]图表篇——asp.net上不错的图表选择—FunsionCharts...
[项目过程中所遇到的各种问题记录]图表篇——asp.net上不错的图表选择—FunsionCharts
在上一篇文章中我介绍了winforms下的图表控件——MSChart,虽然MSChart同样为我们提供了asp.net上的图表支持,但是实际的使用过程却不怎么如意,所以后来正巧在猪八戒上闲逛有人要求使用FunsionCharts这种flash图表来进行展示,所以花了点时间学习了下,本文就是针对FunsionCharts的一些使用问题进行记录。
以下是本文所要介绍的内容:
1、asp.net下的图表选择简介
2、FunsionCharts开发过程中碰到的问题及解决方法。
一、asp.net下的图表选择简介
相比winforms上只能通过一个个控件来展示数据来说,asp.net上要进行图表的展示的选择就多了很多,下面我简单的对几种选择进行介绍,主要是针对其优缺点:
1、MSChart,微软封装好的图表控件,微软自家的东西,当然还有一些其他的图表控件,不过MSChart相对来说做的更好。
优点:重量级,功能强大,涵盖了各行各业所需的各种图表,文档、实例丰富,效果不错。
缺点:使用起来麻烦,需要进行各种配置,如果配置出错则无法显示,其原理是根据所配置的图表类型及传入的数据生成一张张图片,然后在页面上显示相应的图片,应用面窄,无法在页面中大量使用,在asp.net下使用起来比较麻烦。
效果如下图:
2、各类js图表,说到js图表最强大应该是google所提供的图标库了(可能还有我不知道),只需在页面中引入相应的JS库,然后传入相应的数据既可在页面上绘制。
优点:轻量级,功能强大,图表资源丰富,都是通过JS绘制,效果一般,所以运行速度较快,应用广。
缺点:文档、实例相比较少(除了google等几家专门做JS图表库的其他的一些JS图表文档都太少),使用起来需要有一定的JS基础。
效果图如下:
3、各类flash图表,这个就是本文所要介绍的图表类型了,主要是依靠js或者.NET类库在页面输出XML,flash则是读取xml在页面呈现相应的数据。
优点:中量级,功能强大,效果绚丽,上手简单,只需简单XML基础既可。
缺点:收费,图表类型没有上面2种丰富。
效果图如下:
以上就是asp.net上常见的图表类型了,大家可以根据自己的实际需求选择图表。
二、FunsionCharts开发过程中碰到的问题及解决方法。
我使用FunsionCharts纯粹是个意外,就是有天没事在逛猪八戒上看别人发的任务时候看到需要通过FunsionCharts来实现一些绚丽的图表效果的时候被吸引住的,那个时候正好项目也需要用到相应的图表。
FunsionCharts是众多flash图表中的一个,其内置了近40种flash图表,详细使用方法可以移步到天生我豺的博客中查看:点我进入,我这边就不详细介绍了。
下面介绍下我所碰到的问题:
1、图表输出方式的选择
FunsionCharts的图表展示其实最终还是依靠js将图表所需的数据展示传入flash当中,而为了方便asp.net的开发,FunsionCharts专门封装了一个DLL用于asp.net向页面输出展示图表的JS,具体的可以查看FunsionCharts官方的示例代码(文章最后已经附上)。
所以如果为了想达到更好的用户体验的时候,比如,使用AJAX交互的时候可以直接通过JS调用FunsionCharts.js文件中相应的方法,而如果是进行一些企业级的开发,或者完全基于asp.net平台开发的话则可以调用FunsionCharts封装好的DLL方法来使用。
在asp.net下使用FunsionCharts非常的简单,只需根据其xml规则,使用拼字符串的方式进行拼接,然后通过制定的方法输出既可,下面看一段示例代码:
01
|
SqlCommand cmd = new SqlCommand();
|
02
|
SqlDataReader reader = null ;
|
03
|
StringBuilder sbAges = new StringBuilder();
|
04
|
List<ChartClass> list = new List<ChartClass>();
|
05
|
try
|
06
|
{
|
07
|
SqlConnection con = new SqlConnection(
|
08
|
System.Configuration.ConfigurationManager.ConnectionStrings[ "ConnectionString" ].ConnectionString);
|
09
|
con.Open();
|
10
|
cmd.Connection = con;
|
11
|
cmd.CommandText = "sp_crc_demo_rpt_age" ;
|
12
|
cmd.CommandType = CommandType.StoredProcedure;
|
13
|
cmd.Parameters.Add( "@zoneName" , SqlDbType.NVarChar, 64).Value = ucZoneList1.SelectedValue;
|
14
|
cmd.Parameters.Add( "@beginYear" , SqlDbType.Int).Value = Convert.ToInt32(txtBeginYear.Text.Trim());
|
15
|
cmd.Parameters.Add( "@endYear" , SqlDbType.Int).Value = Convert.ToInt32(txtEndYear.Text.Trim());
|
16
|
reader = cmd.ExecuteReader();
|
17
|
|
18
|
while (reader.Read())
|
19
|
{
|
20
|
ChartClass cc = new ChartClass();
|
21
|
cc.CatName = reader[ "年龄段" ] as string ;
|
22
|
cc.Count = Convert.ToInt32(reader[ "总数" ]);
|
23
|
list.Add(cc);
|
24
|
}
|
25
|
sbAges.Append(
|
26
|
"<chart caption='患者年龄对比图' formatNumberScale='0' xAxisName='年龄段' yAxisName='患病数'>" );
|
27
|
for ( int i = 0; i < list.Count; i++)
|
28
|
{
|
29
|
sbAges.AppendFormat( "<set label='{0}' value='{1}' />" ,
|
30
|
list[i].CatName, list[i].Count.ToString());
|
31
|
}
|
32
|
//添加样式开始
|
33
|
sbAges.Append( "<styles>" );
|
34
|
sbAges.Append( "<definition>" );
|
35
|
sbAges.Append( "<style name='titlefont' type='font' size='14'/>" );
|
36
|
sbAges.Append( "<style name='axisfont' type='font' size='12'/>" );
|
37
|
sbAges.Append( "</definition>" );
|
38
|
sbAges.Append( "<application>" );
|
39
|
sbAges.Append( "<apply toObject='Caption' styles='titlefont' />" );
|
40
|
sbAges.Append( "<apply toObject='xAxisName' styles='axisfont' />" );
|
41
|
sbAges.Append( "<apply toObject='yAxisName' styles='axisfont' />" );
|
42
|
sbAges.Append( "<apply toObject='DATALABELS' styles='axisfont' />" );
|
43
|
sbAges.Append( "</application>" );
|
44
|
sbAges.Append( "</styles>" );
|
45
|
sbAges.Append( "</chart>" );
|
46
|
|
47
|
if (!IsPostBack)
|
48
|
{
|
49
|
ltAgeChart.Text = FusionCharts.RenderChartHTML( "FunsionCharts/Column3D.swf" ,
|
50
|
"" , sbAges.ToString(), "YearAgeChart" , "600" , "250" , false , false );
|
51
|
ltAgeChartTable.Text = FusionCharts.RenderChartHTML( "FunsionCharts/Bar2D.swf" ,
|
52
|
"" , sbAges.ToString(), "YearAgeChartTable" , "600" , "250" , false , false );
|
53
|
}
|
54
|
else
|
55
|
{
|
56
|
ltAgeChart.Text = FusionCharts.RenderChart( "FunsionCharts/Column3D.swf" ,
|
57
|
"" , sbAges.ToString(), "YearAgeChart" , "600" , "250" , false , false );
|
58
|
ltAgeChartTable.Text = FusionCharts.RenderChart( "FunsionCharts/Bar2D.swf" ,
|
59
|
"" , sbAges.ToString(), "YearAgeChartTable" , "600" , "250" , false , false );
|
60
|
}
|
61
|
}
|
这段代码的主要步骤:
1、根据条件到数据库中获取相应数据。
2、将数据拼接成指定的XML,有关XML的格式可以查看官方API:点我进入。
3、使用FusionCharts.RenderChart方法来输出相应的JS脚本。
其最终输出的JS如下:
1
|
var chart_YearAgeChartTable = new FusionCharts( "FunsionCharts/Bar2D.swf" , "YearAgeChartTable" , "600" , "250" , "0" , "0" , "" , "noScale" , "EN" );
|
2
|
chart_YearAgeChartTable.setDataXML( "<chart caption='患者年龄对比图' formatNumberScale='0' xAxisName='年龄段' yAxisName='患病数'><set label='0-10' value='0' /><set label='11-20' value='289' /><set label='21-30' value='538' /><set label='31-40' value='188' /><set label='41-50' value='357' /><set label='61以上' value='75' /><styles><definition><style name='titlefont' type='font' size='14'/><style name='axisfont' type='font' size='12'/></definition><application><apply toObject='Caption' styles='titlefont' /><apply toObject='xAxisName' styles='axisfont' /><apply toObject='yAxisName' styles='axisfont' /><apply toObject='DATALABELS' styles='axisfont' /></application></styles></chart>" );
|
3
|
chart_YearAgeChartTable.render( "YearAgeChartTableDiv" );
|
效果图如下:
二、对FunsionCharts进行样式自定义
在上面的图中我们可以发现其中汉字部分【患者年龄对比图】以及【患病数】2段文字都比较小,实际使用过程中效果很不好,所以这时需要更改其字体样式。
在FunsionCharts的XML数据中有个专门的<styles>标签用于定义flash显示图标的样式,其主要分2步:
1、定义样式,在<styles>下新增<definition>,然后在其中定义想要的样式
2、应用样式,在<styles>下新增<application>,然后将已经定义好的样式应用到图表上,需要注意的是应用样式的时候所引用的对象必须是图表已有的对象,而这些对象都有自己的命名,不了解的朋友可以查看API。
其具体的应用代码如下:
01
|
//添加样式开始
|
02
|
sbAges.Append( "<styles>" );
|
03
|
sbAges.Append( "<definition>" );
|
04
|
sbAges.Append( "<style name='titlefont' type='font' size='14'/>" );
|
05
|
sbAges.Append( "<style name='axisfont' type='font' size='12'/>" );
|
06
|
sbAges.Append( "</definition>" );
|
07
|
sbAges.Append( "<application>" );
|
08
|
sbAges.Append( "<apply toObject='Caption' styles='titlefont' />" );
|
09
|
sbAges.Append( "<apply toObject='xAxisName' styles='axisfont' />" );
|
10
|
sbAges.Append( "<apply toObject='yAxisName' styles='axisfont' />" );
|
11
|
sbAges.Append( "<apply toObject='DATALABELS' styles='axisfont' />" );
|
12
|
sbAges.Append( "</application>" );
|
13
|
sbAges.Append( "</styles>" );
|
这样引用过以后,再输出图表效果就立刻显现出来了,标题及相应的文字都变大了,如下图:
当然FunsionCharts还有许多强大功能,可以定义许多绚丽的样式效果,实现与程序的互动等等,这些都需要自己查看API了,我并没有更深入的研究。
官方示例程序下载:点我下载
话说,各位看过的朋友如果觉得本文对您还有点用,或者觉得本文还有价值的话,麻烦将鼠标移到【推荐】上,帮我点击下,非常非常的感谢!
项目过程中所遇到的各种问题记录
编辑器篇:
FCKeditor相关知识及各种常见使用问题
FCKeditor自定义上传路径配置
使用FCKeditor生成静态分页HTML
图表篇:
有关MSChart的一些小技巧
asp.net上不错的图表选择—FunsionCharts
ORM篇:
使用NHibernate配置对象实体的一些小问题
有关NHibernate查询封装
出处:http://kyo-yo.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
2010中国十大杰出IT博客大赛
我的参赛主页: 点我进入
大家如果有闲票就投一下吧,拜谢了!
转载于:https://www.cnblogs.com/dajiang02/archive/2010/12/23/1914687.html
[项目过程中所遇到的各种问题记录]图表篇——asp.net上不错的图表选择—FunsionCharts...相关推荐
- [项目过程中所遇到的各种问题记录]编辑器篇——FCKeditor自定义上传路径配置...
在上一篇文章中,我介绍了FCKeditor的一些相关知识以及我在使用过程中碰到的一些问题及解决方案,今天这篇则是主要记录如何通过FCKeditor来分类管理上传的文件. 以下是本文所要介绍的内容: 1 ...
- [项目过程中所遇到的各种问题记录]部署篇——项目部署过程中那些纠结的问题-SQLServer...
前一篇文章说了些有关IIS的,这篇则是说SQLServer的,相比IIS来说,SQLServer的配置过程中问题就少了许多,而且都比较有针对性,下面开始记录: 注:由于实际项目的开发都是基于SQL20 ...
- [项目过程中所遇到的各种问题记录]编辑器篇——使用FCKeditor生成静态分页HTML...
继续编辑篇的内容,本文是编辑器篇的最后一篇,前面2篇分别是FCKeditor相关知识及各种常见使用问题和FCKeditor自定义上传路径配置,今天这篇文章主要是介绍如何使用fckeditor来生成静态 ...
- [项目过程中所遇到的各种问题记录]工具篇——.NET开发时常用的工具类库
在日常开发的过程当中我们总是会根据项目的开发需求将一些公用的类或者方法进行抽象封装,这些类或方法的抽象封装可能是基于某个项目或者多个项目,最常见的应该就是SQLHelper了,这些类库在实际使用的过程 ...
- [项目过程中所遇到的各种问题记录]编辑器篇——FCKeditor相关知识及各种常见使用问题...
马上2010年就要结束了,所以这几天准备花点时间把这一年中在开发过程中遇到的问题及解决方案记录下来,以备日后使用,目前先规划了:编辑器篇(仅针对asp.net开发中的fckeditor).图表篇(wi ...
- 谈谈在项目过程中的发生争论与争吵
有一句古话说的好, " 有人的地方就有江湖". 与瀑布模式相比, 敏捷开发 更注重人与人的交流. 所以在开发过程中更有 可能会发生 各种争论.争吵. ...
- Java实现CRM项目过程中的细节记录(一)
CRM项目实现过程中的细节记录(一) 文章目录 CRM项目实现过程中的细节记录(一) 一.数据库相关细节 1. 表名 2. 表字段说明 3. 不使用主外键约束 4. 不使用主键自动增长 UUID 5. ...
- 开发中遇到的问题和经验 记录 ------- 后端篇
核心价值就是把现实世界的业务操作搬到计算机上,通过计算机软件和网络进行业务和数据处理,但是时至今日,能用计算机软件提高效率的地方,几乎已经被全部发掘过了,必须能够发掘出用户自己都没有发现的需求,必须洞 ...
- 记录开发移动端项目过程中的各种问题、插件及教程(不定时更新)
本文为整理记录本人开发移动端项目的过程中,针对项目中业务需求所碰到的各种坑.用到的各种插件及教程整理?. 以下为教程整理: 1.再聊移动端页面的适配_Layout, 布局, mobile, CSS 教 ...
最新文章
- es6 匿名函数求阶乘
- asp.net 后台任务作业框架收集
- 【清北前紧急补课1】rmq
- 编写你的第一个 Django 应用,第 5 部分
- 万兆网卡实际吞吐量_AKITIO 10G/NBASE-T PCIe 网卡开箱拆解评测
- mysql 工具 08s01_Mysql管理必备工具Maatkit详解之十四(mk-kill)
- springboot项目打war包流程
- 操作系统——Linux 虚拟内存和物理内存的理解
- 苹果收购英特尔手机芯片业务;西门子将在华建立 5G 研发中心;React Native 0.60.4 发布 | 极客头条...
- React-Native 之 GD (十三)数据持久化(realm) 及 公共Cell
- python表白代码-520使用Python实现quot;我爱你”表白
- attachEvent传递给其handler的一个默认参数
- android 控件xpath软件_请像用户使用软件一样,享受自动化测试~
- 教你如何免费将XPS转换为PDF格式
- matlab 采样点数,信号频率、采样频率、采样点数
- matlab 读取midi,matlab miditoolbox中的midi文件生成函数的改进
- Teambition网盘 批量下载 下载文件夹 递归下载
- 小程序版道歉文案自动生成 道歉神器源码分享
- linux服务器端 postfix+php邮件发送+发件人代发修改配置
- oracle创建用户赋予访问某一视图的权限
热门文章
- python split()方法_秘籍:10个Python字符串处理技巧(附代码)
- loop指令 c语言,arm汇编loop指令
- c语言 数组指针,C语言数组名及指向数组指针的小结
- 微信小程序接入腾讯地图sdk地图 用户自选位置。踩坑+代码实现
- Python安装Whl文件
- java中动态顺序死锁问题
- 封装数据库一系列操作,包括打开/新建数据库,增删改查
- 京瓷6525_京瓷6525扫描怎么设置?
- Undefined control sequence. 问题
- linux 中 alien命令的使用