Fusioncharts+报表工具的详细使用说明及功能特性说明.docx
- 文档编号:9478967
- 上传时间:2023-05-19
- 格式:DOCX
- 页数:14
- 大小:323.43KB
Fusioncharts+报表工具的详细使用说明及功能特性说明.docx
《Fusioncharts+报表工具的详细使用说明及功能特性说明.docx》由会员分享,可在线阅读,更多相关《Fusioncharts+报表工具的详细使用说明及功能特性说明.docx(14页珍藏版)》请在冰点文库上搜索。
Fusioncharts+报表工具的详细使用说明及功能特性说明
Fusioncharts报表工具1
1.Fusioncharts介绍1
2.数据接口XML:
1
3.使用前的准备工作(基于java的Web工程为例):
1
4.创建第一个Chart:
1
5.FusionCharts提供多样式图:
3
6.FusionCharts的高级特性:
7
7.FusionCharts提供了很多设置chart样式的属性:
10
8.动态XML生成的chart:
10
9.FusionCharts的优缺点10
10购买FusionCharts注意的事项:
10
Fusioncharts报表工具
1.Fusioncharts介绍:
Fusioncharts是一个基于Flash的图表组件,可以用来提供数据驱动的动态图标,fusioncharts可用于任何网页脚本语言如,HTML格式,JSP技术等等。
提供交互式和强大的动态图标,fusioncharts充分利用流体美丽的Flash为模板,使用XML作为其数据接口,创造紧凑,互动和真正的动态图表。
2.数据接口XML:
Fusioncharts是以XML为数据接口而成图表。
提供XML两种形式:
直接以XML文件提供数据。
基于数据库数据动态生成XML(此方法在后面详细介绍)。
3.使用前的准备工作(基于java的Web工程为例):
Ø拷贝所有的flash文件(所有的图标文件在下载包中Charts包中)到工程WebRoot目录下,这些flash文件作为生成报表的模板图标。
Ø拷贝FusionCharts.jsp(下载包Includes包中)文件到WebRoot下(可以将其放在WebRoot下的某个文件夹中),这个文件包含将生成的flash图标嵌入到jsp或者HTML文件中。
Ø拷贝FusionCharts.js(下载包JSCLASS包中),这个文件提供了createChartHTML函数是我们轻松的创建图表。
通过向面的介绍我们基本上可以将FusionCharts实际应用到项目当中。
那么如何应用以及注意事项我们将进一步的研究。
4.创建第一个Chart:
在第三节的基础上我们已经有了基于FusionCharts的开发环境。
基于第三节的内容来分析FusionCharts的特性。
Ø以静态的XML为数据接口创建柱状图或者曲线图。
在工程根目录下创建XML文件data.xml此文件的格式为
ØChart标签中属性:
以上结构的xml可以创建单一的柱状和曲线图。
每个XML以
介绍chart标签中的属性:
caption设置图片的标题。
xAxisName设置横坐标的标题,yAxisName纵坐标标题(注意:
纵坐标的标题只能为英文),showValues值为boolen型0为在柱子或者曲线上不显示数据,“1”为显示数据。
Chart标签中有很多相关的属性例如数据格式,特殊字符的转化,我们可以参考FusionCharts的帮助文件根据需要进行设置,这里不一一介绍
Ø以上XML
label为横坐标的元素,value为每个很坐标元素对应的值。
Ø当我们了解了XML文件的内容就可以生成图片了:
创建一个JSP文件。
将FusionCharts.jsp文件包含进来。
编辑JSP文件
<%@includefile="../Includes/FusionCharts.jsp"%>
<%
StringchartHTMLCode=createChartHTML("/FusionCharts/Column3D.swf","Data.xml","","myFirst",600,300,false);
%>
<%=chartHTMLCode%>
FusionCharts.jsp文件提供了createChartHTML()函数来创建图片方法中的共有七个参数,一次介绍:
1:
要引用flash文件的的路径不同的图片引用不同的flash文件,2:
为xml文件的路径,3当动态的生成XMl文件时要传的参数,在此如果物理路径中有XMl文件的话第二个参数传文件路径,第三个参数为空,当物理路径中没有xml文件而是程序生成的话,第二个参数为空,第三个参数为程序生成xml的字符串。
4:
生成图片的id,5,6为图片的widthhight。
7:
图片是否为调试模式。
通过以上的代码就可以生成简单的chart图了。
现在运行web服务器可以看到图片
5.FusionCharts提供多样式图:
在我们的实际应用当中会涉及到复合图标,以及柱状图和曲线图的混合。
那这些主要是XML文件的结构的差异以及应用不同的flash文件
Ø复合图的生成注意事项:
(多柱状)
(多曲线)
(堆状图)
上面两个图的XML结构相同引用不同的Flash文件:
...
value=233'/> value=448'/> ... ... ... 次结构的XML,chart根元素在第四节中介绍过了,接下来介绍chart的子节点 那么就有三个 当鼠标移到某个柱子或者曲线的坐标点上时显示如图数据(一月成都绩效数据是233) Ø生成下图柱状和曲线图 的XML的结构为: categorylabel='成都'/> ... value=成都'/> value=德阳'/> ... value=877'/> value=644'/> ... /trendlines> 和上面的多柱状和多曲线的结构基本相同,区别为要那个 6.FusionCharts的高级特性: Ø热点: FusionCharts也支持获取给每个数据元素的热点数据。 在 在此详细介绍。 链接的形式: a: value=999>链接到本页面,b: value=999>加了前缀n-链接到另一个页面。 c: value=999>弹出新窗口增加了弹出窗口属性设置的信息。 Ø热点中参数的传递: 因为在XML中对特殊字符? &不能识别FusionCharts对特殊字符提供了转义的支持所以在上面的link参数传递改为 value=999&name=成都> 当鼠标移至图片时就会变为手型,点击链接到link.jsp中,在jsp中得到传过来的参数将显示图片某个元素的信息。 现在为止只能传两个参数,要传多个参数时将参数追加为一个字符串用逗号分隔,在link.jsp中通过split一一将参数取出。 Ø整个图片作为热点: 在chart标签中设置属性clickRUL='n-’要是给整个图片设置了热点,那么在每个图片元素设置的热点将不起作用。 Ø保存Chart为一个图片: 要保存chart为图片,在下载的包ImageSaving中拷贝文件FusionChartsSave.jsp这个文件提供了如何将chart以流的输出在指定的路径下,文件考好了在设置chart属性 imageSaveURL为FusionChartsSave.jsp的路径。 imageSaveDialogFontColor保存chart时进度条的颜色。 设置好以后右击鼠标可以看到如图: 进度条为100%是弹出对话框选择保存图片的路径。 ØChart图标题字体大小颜色的设置: ØChart图二级标题设置 Ø纵坐标的标题如果是汉字是只能平行线是,不能旋转显示。 Ø要给标题二级标题横坐标纵坐标分别设置字体大小颜色的话在chart跟标签中加样式如 组件帮助文档中有详细的说明 7.FusionCharts提供了很多设置chart样式的属性: 数据显示格式,以及数据精确度,标题的设置,图片的现实格式。 在帮助文件中有很多。 这就不罗列了。 通过以上的七节,一般的常用的图片很容易生成的。 8.动态XML生成的chart: 在上面的例子中主要以静态的XML为主,那我们在应用当中一般是从数据库中得到一个集合。 这需要我们通过程序将需要的数据装入XML中,此XMl将为一个字符串。 在第四节中将第二个参数为空第三个参数为我们生成的strXML字符串chartHTMLCode=createChartHTML("/FusionCharts/Column3D.swf","","strXML","myFirst",600,300,false); 9.FusionCharts的优缺点: Ø优点: 基于XML数据格式。 对代码稍稍加工一下,让数据以XML格式做为参数传递就可以得到FLASH图表呈现。 有单一系列(Singleseries)呈现,也有多样系列(Multi-series)呈现。 有3D或2D的栏状、饼形、块形或线形呈现。 甚至可以线形与栏状综合呈现,而且使用不难。 Ø缺点: 试用版没有提供源码,使得有的功能不能实现,如导致现在中文乱码无法解决(在源码中提供了支持各种语言的功能),而且价格太贵 10购买FusionCharts: 在FusionCharts网站上我们下载到四个包,但是在我们的实际应用当中只需要FusionCharts一个就可以满足我们的开发需求了(因为在我们的项目中一般是一些统计报表柱状图和曲线图,其他包是实现地图,仪表等等)。 我可以购买FusionCharts的专业许可证(ProfessionalLicense)每月$499 功能特性 animation是否动画显示数据,默认为1(True) showNames是否显示横向坐标轴(x轴)标签名称 rotateNames是否旋转显示标签,默认为0(False): 横向显示 showValues是否在图表显示对应的数据值,默认为1(True) yAxisMinValue指定纵轴(y轴)最小值,数字 yAxisMaxValue指定纵轴(y轴)最小值,数字 showLimits是否显示图表限值(y轴最大、最小值),默认为1(True) 图表标题和轴名称 caption图表主标题 subCaption图表副标题 xAxisName横向坐标轴(x轴)名称 yAxisName纵向坐标轴(y轴)名称 图表和画布的样式 bgColor图表背景色,6位16进制颜色值 canvasBgColor画布背景色,6位16进制颜色值 canvasBgAlpha画布透明度,[0-100] canvasBorderColor画布边框颜色,6位16进制颜色值 canvasBorderThickness画布边框厚度,[0-100] shadowAlpha投影透明度,[0-100] showLegend是否显示系列名,默认为1(True) canvasPadding=20最边上的数据点就会离开边框20px 字体属性 baseFont图表字体样式 baseFontSize图表字体大小 baseFontColor图表字体颜色,6位16进制颜色值 outCnvBaseFont图表画布以外的字体样式 outCnvBaseFontSize图表画布以外的字体大小 outCnvBaseFontColor图表画布以外的字体颜色,6位16进制颜色值 分区线和网格 numDivLines画布内部水平分区线条数,数字 divLineColor水平分区线颜色,6位16进制颜色值 divLineThickness水平分区线厚度,[1-5] divLineAlpha水平分区线透明度,[0-100] showAlternateHGridColor是否在横向网格带交替的颜色,默认为0(False) alternateHGridColor横向网格带交替的颜色,6位16进制颜色值 alternateHGridAlpha横向网格带的透明度,[0-100] showDivLineValues是否显示Div行的值,默认? ? numVDivLines画布内部垂直分区线条数,数字 vDivLineColor垂直分区线颜色,6位16进制颜色值 vDivLineThickness垂直分区线厚度,[1-5] vDivLineAlpha垂直分区线透明度,[0-100] showAlternateVGridColor是否在纵向网格带交替的颜色,默认为0(False) alternateVGridColor纵向网格带交替的颜色,6位16进制颜色值 alternateVGridAlpha纵向网格带的透明度,[0-100] 数字格式 numberPrefix增加数字前缀 numberSuffix增加数字后缀%为'%25' formatNumberScale是否格式化数字,默认为1(True),自动的给你的数字加上K(千)或M(百万);若取0,则不加K或M decimalPrecision指定小数位的位数,[0-10]例如: ='0'取整 divLineDecimalPrecision指定水平分区线的值小数位的位数,[0-10] limitsDecimalPrecision指定y轴最大、最小值的小数位的位数,[0-10] formatNumber逗号来分隔数字(千位,百万位),默认为1(True);若取0,则不加分隔符 decimalSeparator指定小数分隔符,默认为'.' thousandSeparator指定千分位分隔符,默认为',' Tool-tip/Hover标题 showhovercap是否显示悬停说明框,默认为1(True) hoverCapBgColor悬停说明框背景色,6位16进制颜色值 hoverCapBorderColor悬停说明框边框颜色,6位16进制颜色值 hoverCapSepChar指定悬停说明框内值与值之间分隔符,默认为',' 折线图的参数 lineThickness折线的厚度 anchorRadius折线节点半径,数字 anchorBgAlpha折线节点透明度,[0-100] anchorBgColor折线节点填充颜色,6位16进制颜色值 anchorBorderColor折线节点边框颜色,6位16进制颜色值 Set标签使用的参数 value数据值 color颜色 link链接(本窗口打开[Url],新窗口打开[n-Url],调用JS函数[JavaScript: 函数]) name横向坐标轴标签名称
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Fusioncharts 报表 工具 详细 使用说明 功能 特性 说明