图表组件设计思路

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

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

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

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

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

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

评论

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  

非常好 正在找这个资料

34 楼 Ihavegotyou 2010-11-05  

json + google chart

http://code.google.com/apis/chart/docs/chart_playground.html
http://en.wikipedia.org/wiki/Google_Chart_API

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；

先就这几点吧。