`
fantasy
  • 浏览: 515436 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

图表组件设计思路

    博客分类:
  • Java
阅读更多
  从项目经历来分析,客户经常会需要各种图表来分析网络现状及业务影响,导致我们针对于不同的项目会要定制开发不同的图表,而这部分图表大部分不能产品化。

  从技术角度分析,往往一个图表涉及到多个模块,考虑到松耦合,各个模块自己封装自己的接口,而最终需要组合不同模块的接口来获取图表需要的数据。

  从重复造轮子的角度分析,业内的报表组件都比较庞大,且使用他们的实施成本和集成成本比较大,如皮肤的一致性,实施的时候多几项配置。

  为了能够提高开发图表的效率,节约研发成本,所以有必要开发一个轻量级的图表组件。

  图表组件的设计思路为输入为SQL语句,JavaBean。 输出为各种图表或表格。

  附件是初略的设计,主要是描述了下设计思路,涉及到很多细节问题未深入设计,欢迎拍砖!
  • 图表组件.zip (292.3 KB)
  • 描述: 图表组件设计-office2007版本
  • 下载次数: 667
分享到:
评论
37 楼 ppgunjack 2011-06-10  
web chart未来的方向应该是SVG,与js,dom结合更天然,flash一类的可以用来过度
自己做完整组件,js级的dataset实现是有一定必要的,公司愿意做这种基础库肯下血本可以考虑弄funsion chart的源码研究吧
google chart不能去依赖这种东西,但它把数据放在请求中,用service生成图像这种设计思想也是很好的,也可以扩展到生成交互式的矢量图,这样的系统集成也会很容易,api极度简化
36 楼 melin 2011-06-09  
这个设计更没写一样
35 楼 dickluo 2011-06-09  
非常好 正在找这个资料
33 楼 windFeng 2010-11-05  
图表以前做的比较少,正好可以学习下
32 楼 littleJava 2010-11-05  
我们做web图表展示的时候也是通过FusionChart实现的数据轮询,动态展示的,流程和这个类似
31 楼 fantasy 2010-11-05  
cloudzhj 写道
flex作报表挺好,加入flash还不如flex

恩,目前Flex自带的报表组件的效果和样式都不是很绚丽,需要自己手动去实现。
曾经因项目需要统一样式,我花了点时间将flex的报表效果做得和FusionCharts一样,但是这样成本太高。
30 楼 fantasy 2010-11-05  
hellostory 写道
最近也在做公司的一个报表查询系统,前台主要用Flash图表展示(使用FashionCharts),配合简单的表格。领导要求以后可以在前台任意添加修改报表。因此将报表的数据源等配置信息存放在数据表中,而前台Falsh展示配置使用XML文件,用户可以随时修改,如指定数据表的那个字段为X轴等

后台数据源是从数据库中查询出来的,每张报表对应一条配置记录。数据表中有一个字段存放查询SQL语句(如
select CLASS,FieldA,FieldB from T1
),而Flash的XML文件则指定查询结果集的哪个字段作为X轴上的一个系列等

报表配置文件如下:
<graph caption="材料采购分析图"
	xaxisname="类别"
	yxisName="金额"
	showValues='0'
	rotateNames='0'
	formatNumberScale='0'
	baseFontSize="12">
	<categories fieldName="CLASS" font="宋体" fontSize="14" fontColor="000000">
	</categories>
	<dataset fieldName="FieldA" seriesname="本月采购额"></dataset>
	<dataset fieldName="FieldB" seriesname="去年同期采购额"></dataset>
</graph>

其中属性“fieldName”表示引用SQL查询结果集中的哪个字段的系列值。
用户查询时,系统将根据查询结果数据,结合上面的XML文件,填充为一份完整的XML数据文件,然后传递到前台页面Flash显示

后台根据查询结果集,并根据前面的XML配置文件规则,自动生成如下完整的报表数据XML文件:
<graph caption='材料采购分析图' xaxisname="类别" yaxisname="金额" 
	rotateNames='0'					
	rotateYAxisName='0'
	formatNumberScale="0"
	baseFontSize="12">
	<categories fieldName="CLASS"  font="宋体" fontSize="14" fontColor="000000">
	  <category label="材料一" /> 
	  <category label="材料二" /> 
	  <category label="材料三" /> 
	  <category label="材料四" />
	</categories>
	<dataset fieldName="FieldA" seriesname="本月采购额">
		  <set value="100" /> 
		  <set value="200" /> 
		  <set value="300" /> 
		  <set value="220" /> 
	</dataset>
	<dataset fieldName="FieldB" seriesname="去年同期采购额">
		<set value="200" />
		<set value="150" />
		<set value="400" />
		<set value="200" />
	</dataset>
</graph>


这个报表还有待完善的地方:
1、首先需要制作一个向导页面,引导用户对Flash进行配置,最终生成一个报表配置文件(见第一个XML文件)
2、其他略



这个很不错,思路比较清晰。借鉴了!
29 楼 cloudzhj 2010-11-05  
flex作报表挺好,加入flash还不如flex
28 楼 javaDance 2010-11-04  
既然讲究通用性,当然要做的很通用,觉得一开始的切入点就有问题哦,那如果是用NOSQL怎么办呢?呵呵,个人认为你这也不是就像Jfreechart一样在造轮子么?
27 楼 yunzhongxia 2010-11-04  
fantasy 写道
  从项目经历来分析,客户经常会需要各种图表来分析网络现状及业务影响,导致我们针对于不同的项目会要定制开发不同的图表,而这部分图表大部分不能产品化。

  从技术角度分析,往往一个图表涉及到多个模块,考虑到松耦合,各个模块自己封装自己的接口,而最终需要组合不同模块的接口来获取图表需要的数据。

  从重复造轮子的角度分析,业内的报表组件都比较庞大,且使用他们的实施成本和集成成本比较大,如皮肤的一致性,实施的时候多几项配置。

  为了能够提高开发图表的效率,节约研发成本,所以有必要开发一个轻量级的图表组件。

  图表组件的设计思路为输入为SQL语句,JavaBean。 输出为各种图表或表格。

  附件是初略的设计,主要是描述了下设计思路,涉及到很多细节问题未深入设计,欢迎拍砖!


FusionCharts是可以保存为图片的。因此不需要JFreeChart,FusionCharts我很早前就用了,可以保存图片的,api里面就有。
26 楼 wslfh2008 2010-11-04  
回复:hellostory
这种方法不错,个人比较支持
25 楼 pangyi 2010-11-04  
可否采用数据仓库的思想抽象出万能模型来设计?
24 楼 pangyi 2010-11-04  
直接用SQL语句来配置,是不是过于复杂了?
23 楼 hellostory 2010-11-04  
最近也在做公司的一个报表查询系统,前台主要用Flash图表展示(使用FashionCharts),配合简单的表格。领导要求以后可以在前台任意添加修改报表。因此将报表的数据源等配置信息存放在数据表中,而前台Falsh展示配置使用XML文件,用户可以随时修改,如指定数据表的那个字段为X轴等

后台数据源是从数据库中查询出来的,每张报表对应一条配置记录。数据表中有一个字段存放查询SQL语句(如
select CLASS,FieldA,FieldB from T1
),而Flash的XML文件则指定查询结果集的哪个字段作为X轴上的一个系列等

报表配置文件如下:
<graph caption="材料采购分析图"
	xaxisname="类别"
	yxisName="金额"
	showValues='0'
	rotateNames='0'
	formatNumberScale='0'
	baseFontSize="12">
	<categories fieldName="CLASS" font="宋体" fontSize="14" fontColor="000000">
	</categories>
	<dataset fieldName="FieldA" seriesname="本月采购额"></dataset>
	<dataset fieldName="FieldB" seriesname="去年同期采购额"></dataset>
</graph>

其中属性“fieldName”表示引用SQL查询结果集中的哪个字段的系列值。
用户查询时,系统将根据查询结果数据,结合上面的XML文件,填充为一份完整的XML数据文件,然后传递到前台页面Flash显示

后台根据查询结果集,并根据前面的XML配置文件规则,自动生成如下完整的报表数据XML文件:
<graph caption='材料采购分析图' xaxisname="类别" yaxisname="金额" 
	rotateNames='0'					
	rotateYAxisName='0'
	formatNumberScale="0"
	baseFontSize="12">
	<categories fieldName="CLASS"  font="宋体" fontSize="14" fontColor="000000">
	  <category label="材料一" /> 
	  <category label="材料二" /> 
	  <category label="材料三" /> 
	  <category label="材料四" />
	</categories>
	<dataset fieldName="FieldA" seriesname="本月采购额">
		  <set value="100" /> 
		  <set value="200" /> 
		  <set value="300" /> 
		  <set value="220" /> 
	</dataset>
	<dataset fieldName="FieldB" seriesname="去年同期采购额">
		<set value="200" />
		<set value="150" />
		<set value="400" />
		<set value="200" />
	</dataset>
</graph>


这个报表还有待完善的地方:
1、首先需要制作一个向导页面,引导用户对Flash进行配置,最终生成一个报表配置文件(见第一个XML文件)
2、其他略


22 楼 wslfh2008 2010-11-04  
fantasy 写道
wslfh2008 写道
fantasy 写道
wslfh2008 写道
我觉得FusionCharts抽取出一个公用方法就可以了,用SQL的话不通用,你的X轴和Y轴不好定,对多系列也不方便

从数据分析里,已经说明了使用SQL可以实现单系列和多系列图,而多系列需要做一次数据分析。为什么X轴和Y轴不好定,能详细说说吗?

比如X轴和Y轴是可以互换的,你现在能实现它们的互换吗?恐怕还要做一些工作吧,所以不如提供JAVABEAN,说明以哪列为X,Y是哪些元素或者字段,当然还有双Y的情况你是怎么考虑实现的?

对的。我觉得输入SQL,JAVA bean或者XML都可以。在SQL作为输入的情况下,要支持X,Y呼唤就必须在输入的时候增加额外配置信息作为输入,如哪一列是X,哪一列是Y.包括X,Y列的中文描述信息,都必须作为配置信息输入。
双Y是在什么应用场景下会出现?

嗯,双Y就是两个Y轴的情况,一搬是两个单位的情况下,比如金额和数量,那么是金额的就以左右为参考,数量的就以右边为参考
21 楼 fantasy 2010-11-04  
wslfh2008 写道
fantasy 写道
wslfh2008 写道
我觉得FusionCharts抽取出一个公用方法就可以了,用SQL的话不通用,你的X轴和Y轴不好定,对多系列也不方便

从数据分析里,已经说明了使用SQL可以实现单系列和多系列图,而多系列需要做一次数据分析。为什么X轴和Y轴不好定,能详细说说吗?

比如X轴和Y轴是可以互换的,你现在能实现它们的互换吗?恐怕还要做一些工作吧,所以不如提供JAVABEAN,说明以哪列为X,Y是哪些元素或者字段,当然还有双Y的情况你是怎么考虑实现的?

对的。我觉得输入SQL,JAVA bean或者XML都可以。在SQL作为输入的情况下,要支持X,Y呼唤就必须在输入的时候增加额外配置信息作为输入,如哪一列是X,哪一列是Y.包括X,Y列的中文描述信息,都必须作为配置信息输入。
双Y是在什么应用场景下会出现?
20 楼 wslfh2008 2010-11-04  
fantasy 写道
wslfh2008 写道
我觉得FusionCharts抽取出一个公用方法就可以了,用SQL的话不通用,你的X轴和Y轴不好定,对多系列也不方便

从数据分析里,已经说明了使用SQL可以实现单系列和多系列图,而多系列需要做一次数据分析。为什么X轴和Y轴不好定,能详细说说吗?

比如X轴和Y轴是可以互换的,你现在能实现它们的互换吗?恐怕还要做一些工作吧,所以不如提供JAVABEAN,说明以哪列为X,Y是哪些元素或者字段,当然还有双Y的情况你是怎么考虑实现的?
19 楼 蛋饭123 2010-11-04  
支持一下,刚开始做软件开发。找不到合适的描述思路软件
18 楼 chenlixun 2010-11-04  
感觉你设计这东西没有明确的目标。

那我提几点需求:
1、支持输入SQL,输出图片/FLASH;
2、支持输入XML,输出图片/FLASH;
3、支持输入MDX,输出图片/FLASH;

先就这几点吧。

相关推荐

    Web图表生成引擎 的设计思路与实现

    这种设计思路有助于我们在实际项目中快速创建出满足需求的图表组件,同时保持代码的整洁和高效。 总结来说,设计和实现Web图表生成引擎的关键在于理解Web环境下的图表绘制原理,选择合适的实现方式(如JavaBean),...

    LIB008 - Axure数据可视化图表组件库(AxureUX整理).zip

    这对于需要频繁迭代和快速呈现设计思路的项目来说,无疑提高了工作效率。 此外,这个组件库不仅适用于运营大屏,也可以应用于其他需要数据展示的场景,如仪表盘、报告、分析页面等。无论你是初学者还是经验丰富的...

    Axure8动态图表插件.zip

    用户只需在Axure RP中点击“载入元件库”,然后导入" Axure8动态图表插件.zip "压缩包内的"superReport.rplib"文件,即可将动态图表组件库添加到现有的工具栏中。之后,设计师可以像操作其他元件一样,直接拖拽这些...

    FPGA的visio组件.rar

    在进行FPGA开发时,Visio不仅有助于初期的概念设计和验证,还可以作为沟通工具,使团队成员或者客户能够更好地理解设计思路。利用"visio"这个压缩包,设计者可以快速导入预定义的FPGA相关图形,提高设计效率,减少...

    Flex自定义生成图表源码.rar

    然而,有时候标准的图表组件可能无法满足特定的设计或功能要求,这时就需要自定义图表。 源码分析: 1. **自定义组件**:源码可能包含了自定义的Chart类,扩展了基础的Flex Chart组件,以便添加新的功能或者改变...

    axure大数据可视化原型设计组件库RP9.zip

    通过使用这个库,设计师能够更轻松地构建出功能丰富、交互性强的原型,从而帮助团队更快地理解和验证大数据分析解决方案的设计思路。无论是在产品开发初期的构思阶段,还是在迭代改进的过程中,这样的组件库都将极大...

    京东的数据中台组件库_vue.sketch.zip

    本篇文章将深入探讨“京东的数据中台组件库_vue.sketch.zip”这一资源,主要围绕Vue.js框架下的Sketch设计展开,旨在为开发者和设计师提供一个全面了解京东数据中台组件设计的窗口。 Vue.js,作为一个轻量级、高...

    左手数据,右手图表_必备练习.zip

    6. **第22章 22.1 EXCEL图表也可以这样做.xls**:展示了一些创新的图表制作技巧,扩展学员的图表设计思路。 7. **第8课 传统图表是基础.xls**:强调基础图表类型(如柱状图、折线图、饼图等)的学习,这是构建复杂...

    微信小程序开发-工具类-图表案例源码.zip

    微信小程序是一种轻量级的应用开发平台,主要针对移动端,它允许开发者通过微信生态系统提供便捷的服务。这个压缩包“微信小程序...同时,这也是一个很好的学习资源,可以借鉴其中的设计思路,应用于自己的项目开发中。

    Web Echarts+layui 统计图表demo实例 (统计深圳市旅游景点信息)

    在本项目中,"Web Echarts+layui 统计图表demo实例 (统计深圳市旅游景点信息)" 是一个基于Echarts和...开发者可以从中学习到如何结合这两种技术进行数据可视化,同时也可以借鉴其设计思路来开发自己的统计图表应用。

    Axure6.5汉化版+精品组件库

    软件的交互设计功能使得用户可以定义不同元素间的交互行为,如点击、滑动、拖放等,预览时可以模拟实际操作,帮助团队更直观地理解设计思路。此外,Axure还可以生成规范的规格文档和原型演示,便于开发者理解和实现...

    Android统计图表

    通过研究和理解StaticChartDemo的源码,开发者不仅可以学习如何在Android上创建统计图表,还能掌握如何结合实际业务需求,定制和优化图表组件,提升用户体验。此外,也可以借鉴和学习其他优秀图表库的设计思路,...

    Axure组件库大全and非常全

    总的来说,"Axure组件库大全and非常全"是一个宝贵的资源,它汇集了众多设计元素和模板,对于从事Axure原型设计的人员来说,是提升工作效率、拓宽设计思路的重要工具。通过熟练运用这些组件,设计师可以更加专注于...

    Axure原型:大屏可视化看板原型设计常用元件+地图元件

    在"20210303171422.png"这个文件中,可能展示了某个具体的设计实例或者元件组合效果,这对于学习和借鉴他人设计思路非常有帮助。研究这些示例可以帮助我们理解如何在实际项目中有效地组合和使用这些元件。 "常用...

    基于ECharts的数据可视化分析组件设计实现

    这个基于ECharts的数据可视化组件设计实现了对基础图表类型的支持,如柱状图、折线图、饼图等,并且允许用户进行多级钻取,从宏观层面逐步细化到微观细节。同时,用户还可以在不同类型的图表之间自由切换,以获取...

    一株花包含关系ppt图表.rar

    在“一株花包含关系ppt图表”中,每个“花朵”可能代表一个具体的部门、任务或者组件,而“茎”和“叶”则可能是这些元素的上一级类别或者支撑系统。通过这种方式,图表清晰地展示了各个部分如何相互关联并构成整体...

    android studio课程设计作业PPT+设计文档+可运行源代码+设计思路.rar

    1. **UI设计**:使用XML布局文件创建界面,包括输入体重的EditText、显示体重图表的ChartView、设置目标和提醒的Dialog等。可以运用Material Design指南来提升用户体验。 2. **数据管理**:数据通常保存在SQLite...

    TeeChartVCLFMXSOURCE-2016.19.7z

    对于开发者来说,访问源代码意味着可以深入学习组件的设计思路,了解图形渲染、数据处理和交互逻辑的实现细节。这不仅有助于自定义图表样式,还可以在遇到问题时进行调试和修复,或者根据项目需求扩展组件功能。 4...

    Flex实现双轴组合图的设计思路及代码

    在Flex中实现双轴组合图的设计思路和代码涉及到多个知识点,以下将详细介绍: 1. Flex基础:Flex是一种用于开发富互联网应用的开发环境,它包括一个编译器和一套语言规范。Flex使用MXML(基于XML的标记语言)和...

    行业文档-设计装置-扫描仪垫纸玻璃组件压合机.zip

    描述中的信息简洁,但可以推测文档可能包含对压合机的工作原理、设计思路、工艺流程、技术参数、设备性能、操作指南等内容的详细阐述。在设计阶段,考虑的因素可能包括压合精度、效率、稳定性以及设备的耐用性等。在...

Global site tag (gtag.js) - Google Analytics