fusioncharts使用范例
FusionCharts详细说明
FusionCharts详细指导1．FusionCharts简单介绍图表显示是很多开发工作所必不可少的一项功能，FusionChart是一个基于Flash的图表组件，可以用来提供数据驱动的动态图表。
通过Adobe Flash,用XML 格式的数据输入，实现数据展示的图表化，动态化以及交互性。
使用FusionChart 可以方便的生成漂亮的柱状图、曲线图等图标，显示数据直观、清晰。
(1)与AJAX/JavaScript结合：可以通过页面的热点链接或者动态的服务器端的数据更新，而无需刷新页面来刷新图形。
(2)只需要将SWF文件复制到系统中，不需要安装任何插件之类的东西(3)需要把图形格式和数据以XML的格式传送给SWF文件，即可得到你所要的图形。
(4)减轻了服务器的加载负担。
FusionCharts 是由客户端的Adobe Flash平台根据服务器婴儿湿疹怎么办端提供的SWF文件以及XML格式的数据文件生成的图形。
(5)丰富多样的图形类型，Flash动画图表、地图和仪表盘。
访问官网:/2. FusionCharts可展示的图形类型柱状图、折线图、饼图、条形图、区域图、堆叠图、冒泡图、仪表盘、滑动条、地图、ffdy电影等二FusionCharts的使用1.基本步骤(1)SWF 文件引入你想创建图形类型对应的SWF文件，如3D柱状图对应的SWF文件是Column3D.swf(2)xml格式的数据文件FusionCharts只能访问预选定义的xml格式的数据，所以首先要把你要展示的数据转换成xml格式。
如下：是简单的3D柱状图的xml数据格式。
源文件Data.xml<chart>标签里面的树形定义是和整个图形相关的一个属性，图形名称显示，X轴Y轴的名称显示等。
<set>部分是具体的数据部分，label和value分别定义了某个数据的具体值，在图形上表现为柱状图每条柱子的名字及值。
(3)嵌入图形的html文件这里用到一个公用的FusionCharts.js文件，页面中一定要引入。
FusionCharts 技术文档
Explicitly render JavaScript only charts
（明确地呈现只支持Javascript的表）
从FusionCharts XT - 服务第3版开始，您可以指定的JavaScript图表别名（如图表列表“页面中列出的），而不是图表SWF文件名创建一个纯JavaScript图表。
下面的代码片断演示了这是如何实现的：
chart alias. Based on the JavaScript chart alias provided, FusionCharts JavaScript Class renders the respective JavaScript chart.
您也可以选择使用SWF文件的名称及其路径的JavaScript图表来呈现。
对于这一点，你只需要添加一行代码，如下所示：
此代码将要求FusionCharts渲染器的，跳过Flash渲染和创建纯JavaScript图表。
此设置被应用到这条线后呈现的所有图表。
因此，如果你申报本文开头，在页面中的所有图表将使用JavaScript渲染。
您将不再需要为每个图表在页面中声明相同的。
注意：许多浏览器会限制从JavaScript访问本地文件系统中，由于安全方面的原因。
JavaScript 的图表，在本地运行时，将不能够访问一个网址提供的数据。
如果您运行的文件从服务器，它会运行的精绝，虽然。
然而，在本地运行时，如果您提供的数据作为字符串（使用的数据字符串的方法），它工作得很好。
点击这里查看代码使用的数据字符串的方法»。
FusionCharts参数说明——3D饼图属性(Pie3D.swf )
animation 是否显示加载图表时的动画palette 内置的图表样式,共5个paletteColors 自定义图表元素颜色(为多个,如过过少会重复) showAboutMenuItem 右键是否显示"关于FusionCharts" aboutMenuItemLabel 右键关于自定义文字aboutMenuItemLink 右键关于自定义链接(FusionCharts链接格式) showZeroPies 是否显示0值的饼showPercentValues labels上是否显示百分数showPercentInToolTip tip上是否显示百分数showLabels 是否显示LabelmanageLabelOverflow 当Label溢出时进行自动管理useEllipsesWhenOverflow 当Label溢出时候使用... showValues 是否显示值labelSepChar label上的分隔符defaultAnimation 是否关闭默认动画一开始自定义动画clickURL 整个图表的点击的url标题caption 主标题subCaption 副标题图表的装饰showBorder 显示边框borderColor 边框颜色borderThickness 边框粗细borderAlpha 边框透明度bgColor 背景颜色bgAlpha 背景透明度bgRatio 背景比例bgAngle 背景角度bgSWF 背景flash地址可以是图片地址bgSWFAlpha 背景flash的透明度showVLineLabelBorderlogoURL log地址logoPosition log位置logoAlpha log透明度logoScale log比例logoLink log链接元素的装饰showPlotBorder 每一片的边框plotBorderColor 每一片的边框颜色plotBorderThickness 每一片的边框粗细plotBorderAlpha 每一片的边框透明度plotFillAlpha 每一片的边框填充透明度use3DLighting 3d光效果饼/圈专有属性slicingDistance 当点击图表的时候这一片饼离开中心点的距离pieRadius 饼的外半径startingAngle 起始角度enableRotation 开启旋转pieInnerFaceAlpha 图表里面的透明度pieOuterFaceAlpha 图表外面的透明度pieYScale 饼立起来的角度,角度越大看到的面积越大. pieSliceDepth 图表的厚度标明线& Labels (label和图表元素之间的线)enableSmartLabels 是否开启标明显skipOverlapLabels 跳过重复标签isSmartLineSlanted 标明线方式(倾斜或直)smartLineColor 标明线颜色smartLineThickness 标明线粗细smartLineAlpha 标明线透明度labelDistancesmartLabelClearance 标明线长度数字formatNumber 逗号来分隔数字(千位，百万位),默认为1(True)；若取0,则不加分隔符formatNumberScale 是否格式化数字,默认为1(True),自动的给你的数字加上K（千）或M（百万）；若取0,则不加K或MdefaultNumberScale 默认数量级numberScaleUnitnumberScaleValuenumberPrefix 数字前缀numberSuffix 数字后缀decimalSeparator 小数分隔符thousandSeparator 千位分割符inDecimalSeparator 在十进位分割符inThousandSeparator 在千位分割符decimals 小数forceDecimals 是否用0填充以至满足要保留的小数位字体baseFont 基本字体baseFontSize 基本字号baseFontColor 基本字颜色Tool-tipshowToolTip 是否显示提示toolTipBgColor 提示背景色toolTipBorderColor 提示边框色toolTipSepChar 提示分隔符showToolTipShadow 是否显示提示Tool-tip阴影边距captionPadding 标题内边距chartLeftMargin 图表左外边距chartRightMargin 图表右外边距chartTopMargin 图表上外边距chartBottomMargin 图表下外边距set元素borderColor 边框颜色isSliced 被切开label [label]value 值color 颜色link 链接(FusionCharts链接格式)toolText 自定义提示图例(3.2版本以上)showLegend 是否显示图例legendPosition 图例位置legendCaption 图例说明legendIconScale 图例图标0-5(图例图标大小)legendBgColor 图例背景色legendBgAlpha 图例透明度legendBorderColor 图例边框颜色legendBorderThickness 图例边框粗细legendBorderAlpha 图例边框透明度legendShadow 图例阴影legendAllowDrag 是否允许拖动图例legendScrollBgColor 图例滚动条背景色legendScrollBarColor 图例滚动条颜色legendScrollBtnColor 图例滚动条按钮颜reverseLegend 反转图例interactiveLegend 图例交互(是否可点击)legendNumColumns 设置图例的列数(如果设置不当会自动设置,如果legendPosition设置为右面该属性自动设置为1)minimiseWrappingInLegend。
FusionCharts详细中文使用手册
FusionCharts使用说明一、FusionCharts简介FusionCharts是InfoSoft Global的一个产品，InfoSoft Global 公司是专业的Flash图形方案提供商，他们还有几款其他的，基于Flash技术的产品，都非常的漂亮。
FusionCharts free 是一个跨平台，跨浏览器的flash图表组件解决方案，能够被, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单HTML 页面甚至PPT调用。
你不需要知道任何关于flash编程的知识，你只需要知道你所用的编程语言就可以了。
旗下共有如下产品：FusionCharts V3：主打产品，包含44种常用的报表图形；FusionCharts FREE：免费，包含22中常用的报表图形；FusionWidgets V3：小部件，包括仪表盘，刻度尺等；FusionMaps V3：地图；PowerCharts V3：预览版，提供更强大图形展示功能，但可能存在一定的缺陷；二、FusionCharts商用性说明据官方网站介绍，目前FusionCharts在全球110个国家中有超过12000个客户以及250000用户，其中不乏微软、谷歌、IBM等知名IT厂商。
三、FusionCharts使用说明安装：在当前工程中新建一个文件夹，命名为：FusionCharts，压缩包中的swf文件、js文件全部放入该文件夹，安装完成（以上为官方介绍的方法，实际使用中，可以将js文件放入js文件夹，swf文件单独建一个swf的文件夹即可）。
原理：官方提供了44中不同的图形种类，每种图形以swf文件的形式提供。
另外官方提供了一组js脚本文件，通过这些脚本文件可以将按照规定格式的xml数据传递给相应的swf文件，从而展示不同的图表。
具体xml格式见fusioncharts XML api。
使用：使用FusionCharts进行绘制报表最重要的环节就是如何把XML数据传送给FusionCharts。
【推荐下载】FusionChart实现漏斗图
FusionChart 实现漏斗图2013/09/28 6 1、提供静态数据源XMLFunnel.xml：?xml version= 1.0 encoding= UTF-8 ? chart manageResize= 1 caption= 2012 年月平均统计人数subcaption= 千decimals= 1 baseFontSize= 12 useSameSlantAngle= 1 isHollow= 1 formatNumberScale= 1 numberPrefix= $ set label= 一月value= 38563 / set label= 二月value= 23563 / set label= 三月value= 84564 / set label= 四月value= 45654 / set label= 五月value= 36342 / set label= 六月value= 38563 / set label= 七月value= 27563 / set label= 八月value= 84564 / set label= 九月value= 35654 / set label= 十月value= 58342 / set label= 十一月value= 35654 / set label= 十二月value= 48342 / /chart 2、源码如下Funnel.jsp：%@ page language= java contentType= text/html; charset=UTF-8 pageEncoding= UTF-8 % !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//ENw3/TR/html4/loose.dtd html head meta http-equiv= Content-Type content= text/html; charset=UTF-8 title FusionChart 实现漏斗图/title script type= text/javascript src= ../Scripts/JS/jquery-1.10.2.js /script script type= text/javascript src= ../Chart/JS/FusionCharts.js /script style type= text/css body{ width: 100%; height: 100%; font-size: 12px; } div{ width: 100%; height: 100%; } /style script type= text/javascript $(function(){ //利用XML 提供的静态数据来作为数据源var Funnel =new FusionCharts( ../Chart/SWF/Funnel.swf , FunnelId , 98% , 600 , 0 , 1 ); Funnel.setXMLUrl( xml/Funnel.xml Funnel.render( Funnel3D }); /script /head body div id= Funnel3D /div /body /html 3、运行结果（如图）（1）初始化（2）修改了isHollow= 1tips:感谢大家的阅读，本文由我司收集整编。
FusionCharts图表插件开发教程
<html> ...
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8444553540000" codebase==6,0,0,0" width="600" height="500" id="Column3D" >
最新课件
10
最新课件
11
问题
如果你很不幸，没有在页面上看到图形，那么可能是下面的原因之一：
1.SWF 没有放到正确的文件夹。 2.在Chart.html里，SWF的路径设置不正确。 3.没有安装Flash Player。 4.没有启用浏览器Flash播放选项。 如果你得到了一个“Error in Loading Data”的消息，可能是： 1.Data.xml文件没放到正确的文件夹。 2.Data.xml的文件名不正确。比如，你可能不小心把它命名为Data.xml.txt。 如果你得到了一个“Invalid XML Data”的消息，可能是; 1.Data.xml里的内容有错误。 到这里，第一个图表就做完了，感觉怎么样？你是觉得简单呢，容易呢，还是小Case呢 不过，这里我有个小问题，就是Data.xml里，yAxisName属性如果是中文的话，显示不出 来。希望随着教程的继续，我进一步了解FCF以后，可以解决这个小问题，也许它就是 BUG。
最新课件
6
FusionCharts Free我的第一个图形
要使用FCF来创建图形，你需要做下面三件事情：
1.选择好你要创建的图形类型对应的SWF文件。例如，我们现在要创建的是3D柱状图形，
FusionCharts图表控件中文版超详细整理使用手册资料
FusionCharts图表控件中文版使用手册附注fusionCharts详细属性一、构成fusionCharts的三要素： (3)swf、data.xml、承载图表的载体 (3)二、对于我们还未使用的功能： (3)图表转换成图片或者pdf导出、热点链接 (3)三、重点 (3)fusionCharts的基本知识部分： (4)一、SWF 动画文件 (4)二、XML数据文件 (4)三、HTML（当然也可以使用JSP）嵌入charts文件 (5)四、结合javascript 的应用： (5)五、热点链接：link=’ ’ (5)六、图表数据导出 (6)七、图表导出为pdf或者图片（JPEG和PNG）形式 (6)八、中文编码解决方法： (7)附注fusionCharts详细属性： (7)1、边框及整个背景的属性： (7)2、图表背景属性： (8)3、外部引入LOGO: (8)4、图表名称和轴属性： (9)5、data plot属性 (9)6、数据横纵轴属性 (9)7、图表上的数据显示 (10)8、图表调色板 (10)9、横轴坐标最大值、最小值属性 (10)10、图表内部的div线相关属性 (10)11、图表内部垂直div线的相关属性 (10)12、Zero plan相关属性 (11)13、Anchors相关属性（针对线图） (11)14、tool-tip 属性 (11)15、padding属性 (11)16、数据格式相关属性 (12)17、legend相关属性 (12)18、3D图表属性 (12)19、自定义菜单属性 (13)20、趋势线： (13)21、Styles属性：（eg）定义自定义效果属性，然后在一个对象上进行使用。
(13)按照编程xml构造结构分：（只列举出了几种主要属性，主要用于xmlBuiler）.. 16一、构成fusionCharts的三要素：swf、data.xml、承载图表的载体1、Swf：按照你所设计的图表类型加载相应的.swf文件到你的工程即可(eg：若你想生成一张二维柱状图，那么在你的工程里就必须包含Column2D.swf文件)2、Data.xml：方法一：直接用data.jsp文件替代data.xml文件，写法格式同xml。
FusionCharts X轴显示方式
Handling long x-axis labelsUsing rotated and slanted mode∙Using staggered mode and setting stagged lines∙Showing every n-th label∙Displaying short label on axis and showing full name as tool tip Let's see each of them one by one.1）Wrap Mode（换行模式）<chart labelDisplay='WRAP'>2）Rotating and Slanting Labels（旋转模式）<chart numberPrefix='$' labelDisplay='ROTATE'><set label='Jan 2006' value='434' /><set label='Feb 2006' value='376' /><set label='Mar 2006' value='343' /><set label='Apr 2006' value='234' /><set label='May 2006' value='356' /></chart>3）slant the labels at 45 degree（旋转且倾斜45度）<chart labelDisplay='Rotate' slantLabels='1' ..>4）Staggering labels on multiple lines（交错模式）<chart labelDisplay='Stagger' ..>.5）多行交错模式<chart labelDisplay='Stagger' staggerLines='n' ..>6）Showing every n-th label（跳跃模式）<chart numberPrefix='$' labelStep='4'showValues='0'> <set label='Jan 2006' value='434' /><set label='Feb 2006' value='376' /><set label='Mar 2006' value='343' /><set label='Apr 2006' value='234' /><set label='May 2006' value='356' /><set label='Jun 2006' value='183' /><set label='Jul 2006' value='365' /><set label='Aug 2006' value='357' /><set label='Sep 2006' value='375' /><set label='Oct 2006' value='345' /><set label='Nov 2006' value='655' /><set label='Dec 2006' value='435' /><set label='Jan 2007' value='586' /></chart>7）Displaying short label on axis and showing full name as tool tip<chart numberPrefix='$' rotateValues='1'><set label='J' toolText='January' value='434' /><set label='F' toolText='February' value='376' /><set label='M' toolText='March' value='343' /><set label='A' toolText='April' value='234' /><set label='M' toolText='May' value='356' /><set label='J' toolText='June' value='183' /><set label='J' toolText='July' value='365' /><set label='A' toolText='August' value='357' /><set label='S' toolText='September' value='375' /><set label='O' toolText='October' value='345' /><set label='N' toolText='November' value='655' /><set label='D' toolText='December' value='435' /></chart>。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
fusionCharts图表组件学习小例子
博客分类：
web开发技术总结
jfreechart360JavaScriptHTMLGoogle
以前一直用jfreeChart 最近换了一个fusionChart组件感觉还行！其实也很简
单！ 这里闲话不说 let's go!
效果如下：
具体jsp代码：
Html代码
1.
2.
3.
4.
14.
15.
FusionCharts.js 文件和Charts/Pie3D.swf 见附件：
当然了这个只是一个饼状图而已，很有很多各式各样的图标形式，关键是学习怎
么用就ok了！
里面提供了37种swf文件。呵呵 说明有37中图标表现形式吧！
具体的参数自己可以google一下！
【本人做的小例子也附上
】
再次分别推荐适合初学者学习的连接：
http://wenku.baidu.com/view/6892a52f0066f5335a81214f.html
加入页面方法：
http://wenku.baidu.com/view/b9bef0868762caaedd33d432.html
参数说明：
http://wenku.baidu.com/view/587c3d1810a6f524ccbf8593.html
funtionChart.rar (2.4 MB)
下载次数: 21
查看图片附件